資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中的上下文選擇器是什麼？
上下文選擇器允許開發者為文件的不同部分選擇不同型別的樣式。在 CSS 中，開發者可以指定直接樣式，也可以透過建立某些類來指定樣式。上下文選擇器僅將樣式應用於指定的元素。文件中元素之間的父子關係可以稱為上下文。上下文選擇器將有兩個或兩個以上的由空格分隔的選擇器。
在本文中，我們將瞭解 CSS 中的上下文選擇器是什麼以及如何使用它。
什麼是上下文選擇器，為什麼要使用它？
上下文選擇器包含兩個選擇器，例如類或 ID，這些選擇器被稱為簡單選擇器。讓我們看一下上下文選擇器的語法，以便我們瞭解它的含義以及如何使用它。
語法
div{color: blue}
span{color: green}
在上面的語法中，您可以看到我們使用了任何簡單選擇器，並且它由空格分隔。我們可以為任何想要設定樣式的特定元素應用任何 CSS 屬性，並且樣式將應用於整個 HTML 文件中具有上下文的全部元素。讓我們看一下輸出，以便我們更好地理解選擇器。
示例
方法 - 我們將使用 div 標籤，其中將有兩個段落標籤，這意味著 div 將是父元素，而段落將是子元素。我們將使用父元素來更改這些元素的顏色。現在，讓我們看一下程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>An example of using the contextual selector</title>
<style>
div {
color: yellow;
}
p {
color: lightgreen;
}
</style>
</head>
<body>
<div>
<p>Hello everyone!!</p>
<p>How is your day going?</p>
</div>
<p>A very good morning to all the readers</p>
</body>
</html>
在上面的程式碼中，我們建立了一個 div，然後在該 div 中添加了 2 個段落（標籤），然後在 div 元素外部添加了一個段落，之後我們進入 CSS 部分並將 div 元素的顏色更改為“黃色”，段落更改為“淺綠色”，這意味著 HTML 文件上的所有段落元素都將具有“淺綠色”顏色。讓我們看一下輸出，以瞭解上面的程式碼的作用。
在上面的輸出中，您可以看到，即使在 div 中的所有段落，其顏色也為“淺綠色”。但是，如果我們只想更改 div 元素內部的一個段落的顏色，該怎麼辦？您可能想知道如何更改 div 中段落顏色，而不是 div 外部的段落顏色。
讓我們看看使用上下文選擇器的另一種方法，以便我們瞭解上下文選擇器的真正重要性。
語法
為了使用上下文選擇器
div p{ color: lightgreen;}
在上面的語法中，您可以看到我們定位了 div 元素內部的段落，而不是 div 外部的元素。
讓我們看另一個例子，以便我們可以更具體地應用屬性。
示例
在此，我們建立了一個段落標籤，它將包含在 div 標籤內，我們將段落的顏色設定為與 div 外部的段落顏色不同。現在讓我們看一下程式碼，以瞭解我們將如何操作。
<!DOCTYPE html>
<html lang="en">
<head>
<title>An example of using the contextual selector</title>
<style>
div p {
color: lightgreen;
}
</style>
</head>
<body>
<div>
<p>Hello everyone!!</p>
<p>How is your day going?</p>
</div>
<p>A very good morning to all the readers</p>
</body>
</html>
在上面的程式碼中，您可以看到我們在一個 div 中添加了2 個段落標籤，然後在 div 外部添加了一個段落，然後使用上下文選擇器僅更改 div 內部的段落顏色，而不是 div 外部的段落顏色。讓我們看一下輸出，以瞭解上面的程式碼的作用。
在上面的輸出中，您可以看到兩個段落為“淺綠色”，而 div 元素外部的段落為預設顏色。
使用上下文選擇器，開發者可以指定他想要定位哪些標籤，以應用樣式和屬性。
以上兩個示例演示了開發者如何使用上下文選擇器，以及如何僅將樣式應用於指定的元素。
結論
上下文選擇器一開始可能看起來很令人困惑，但當我們需要更改非常特定的元素的樣式時，它非常有用。這些上下文選擇器使開發者能夠更好地控制，因為他可以更改任何他想要更改的元素的樣式。
在本文中，我們瞭解瞭如何使用上下文選擇器以及使用它的目的。
1K+ 次瀏覽
