数据结构
网络
关系型数据库管理系统
操作系统
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+ 次浏览
