CSS 中的上下文选择器是什么？
- WBOY转载
- 2023-08-26 20:29:19953浏览
上下文选择器允许开发人员为文档的不同部分选择不同类型的样式。在 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中文网其他相关文章！