CSS 中的上下文選擇器是什麼？
- WBOY轉載
- 2023-08-26 20:29:19952瀏覽
上下文選擇器允許開發人員為文件的不同部分選擇不同類型的樣式。在 CSS 中，開發人員可以直接指定樣式，也可以透過建立某些類別來指定樣式。上下文選擇器只會將樣式套用於指定的元素。文檔中元素之間的父子關係可以稱為上下文。上下文選擇器將有 2 個或 2 個以上分離的選擇器。
在本文中，我們將了解什麼是 CSS 中的上下文選擇器以及如何使用它。
什麼是上下文選擇器以及我們為什麼要使用它？
上下文選擇器包含兩個選擇器，例如類別或 id，這些被稱為簡單選擇器。讓我們看一下上下文選擇器的語法，以便我們了解它的含義以及如何使用它。
文法
div{color: blue}
span{color: green}
在上面的語法中，您可以看到我們使用了任何簡單的選擇器，並且用空格分隔。我們可以將任何 CSS 屬性套用到我們想要新增樣式的任何特定元素，並且樣式將套用於整個 HTML 文件中具有上下文的所有元素。讓我們看一下輸出，以便更好地理解選擇器。
範例
方法 - 我們將使用 div 標籤，其中有 2 個段落標籤，這表示 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 元素外部的段落為預設顏色。
使用上下文選擇器，開發人員可以指定他想要定位的標籤，以套用樣式和屬性。
上面的 2 個範例示範了開發人員如何使用上下文選擇器並將樣式僅套用於指定元素。
結論
上下文選擇器一開始可能看起來很混亂，但是當我們想要更改非常特定元素的樣式時，它非常有用。這些上下文選擇器為開發人員提供了更大的控制感，因為他可以更改他想要更改的任何元素的樣式。
在本文中，我們了解如何使用上下文選擇器以及使用它的目的是什麼？
以上是CSS 中的上下文選擇器是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！