CSS 中的上下文选择器是什么？

什么是上下文选择器

在 CSS 中，通过上下文选择器可以指定在一个元素内部出现的另一个元素的样式。也就是说，上下文选择器可以让我们根据元素的位置关系来为其设置样式。

上下文选择器使用 E F 的形式，其中 E 和 F 分别是两个选择器。这个格式表示选择 F 元素的祖先元素中所有 E 元素的样式。例如：

div p {
  color: red;
}

这个选择器表示选择所有在 div 元素内部的 p 元素，将它们的颜色设置为红色。

简单的上下文选择器

一个例子可以更好地说明上下文选择器的工作方式。假设我们有下面这样一段 HTML 代码：

<div class="container">
  <p>这个段落内的文字需要设置样式</p>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
  </ul>
</div>

现在我们想要为 li 元素设置样式，但只有在它们位于 div.container 元素内部的时候才设置。在这种情况下，我们可以使用下面的代码：

.container li {
  color: red;
}

这个代码表示，只有当 li 元素位于 div.container 元素内部时，才应用这个规则。如果我们在其他的地方使用了 li 元素，那么这个样式选择器是不生效的。

同样的道理，如果我们想要为 ul 元素中的 li 设置样式，但是只有当它们位于 div.container 元素内部时才生效，那么可以这样写：

.container ul li {
  color: red;
}

这个代码表示，只有当 li 元素位于 ul 元素内部，而且这个 ul 元素位于 div.container 元素内部时，才应用这个规则。

多层选择器

上下文选择器可以与其他的选择器一起使用，形成复杂的选择器。

下面的代码表示，选择 div.container 元素内部的所有 p 元素，但是不包括 div.container 本身内部的 p 元素：

.container p {
  color: red;
}

如果我们想要选择 div.container 元素内部的所有 a 元素，但是不包括 div.container 本身内部的 a 元素，可以使用下面的代码：

.container a {
  color: red;
}

值得注意的是，这个规则并不能选择 p 元素里面的 a 元素，因为它们不是 div.container 元素的子元素。如果我们想要选择 p 元素里面的 a 元素，可以使用下面的代码：

.container p a {
  color: red;
}

这个代码表示选择所有在 p 元素内部的 a 元素，只有在它们位于 div.container 元素内部时，才设置颜色为红色。

总结

上下文选择器是 CSS 中非常有用的选择器，可以让我们根据元素的位置关系来为其设置样式。使用上下文选择器可以形成复杂的选择器，从而实现更加灵活的样式控制。