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 元素外部添加了一个段落。之后，我们进入 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 元素外部的段落则为默认颜色。
使用上下文选择器，开发人员可以指定要应用样式和属性的目标标签。
以上两个示例演示了开发人员如何使用上下文选择器并将样式仅应用于指定元素。
结论
上下文选择器乍一看可能令人困惑，但当我们想要更改特定元素的样式时，它非常有用。这些上下文选择器让开发人员拥有了更大的控制力，因为他可以更改任何他想要更改的元素的样式。
在本文中，我们了解了如何使用上下文选择器以及使用它的目的是什么?
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
