CSS 上下文选择器是什么

上下文选择器允许开发者为文档的不同部分选择不同类型的样式。在 CSS 中，开发者可以直接指定样式，也可以通过创建特定的类。上下文选择器只会将样式应用于指定的元素。文档中的元素之间的父子关系可以称为上下文。上下文选择器将包含两个或多个通过分隔符分隔的选择器。

在本文中，我们将介绍 CSS 中的上下文选择器是什么，以及我们如何使用它。

什么是上下文选择器以及为什么要使用它

上下文选择器包含两个选择器，比如类或者 ID，这些选择器被称为简单选择器。让我们看一下上下文选择器的语法，以便我们可以理解它的含义和如何使用它。

语法

div{color: blue}
span{color: green}

在以上的语法中，您可以看到我们使用了任何简单选择器，并且它们用空格分隔开。我们可以为任何我们想要应用样式的特定元素应用任何CSS属性，并且样式将应用于整个HTML文档中所有具有相应上下文的元素。让我们来看一下输出，以便我们更好地理解选择器。

示例

方法 - 我们将使用一个div标签，其中包含两个p标签，这意味着div将作为父元素，而p将作为子元素。我们将使用父元素来改变这些元素的颜色。现在，让我们来看一下代码。

<!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元素之外的段落的颜色是默认颜色。

使用上下文选择器，开发人员可以指定他想要目标的标记，以应用样式和属性。

上述两个示例演示了开发人员如何使用上下文选择器并仅将样式应用于指定的元素。