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

在本文中，我们将介绍CSS中的上下文选择器，它是一种强大的选择器类型，可以选择具有特定关系的元素。

阅读更多：CSS 教程

什么是上下文选择器？

上下文选择器又称为父选择器，它使用空格来选择嵌套在其他元素内部的元素。它可以通过选择器的顺序和位置来指定元素之间的关系，从而更精确地选择到目标元素。

例如，我们有一个HTML结构如下：

<div class="parent">
  <h1>父元素</h1>
  <div class="child">
    <p>子元素</p>
  </div>
</div>

如果我们想选择到子元素，可以使用上下文选择器进行选择：

.parent .child p {
  /* 样式属性 */
}

在上述示例中，我们使用了上下文选择器.parent .child来选择到子元素。这表示只有当元素是.child元素的子元素，.child元素是.parent元素的子元素时，样式属性才会应用到元素上。

上下文选择器的种类

后代选择器

后代选择器使用空格来选择嵌套在其他元素内部的元素。它会选择所有符合条件的后代元素。

例如，我们想选择到所有位于.parent元素内部的元素，可以使用后代选择器：

.parent p {
  /* 样式属性 */
}

在上述示例中，所有位于.parent元素内部的元素都会应用上述样式属性。

子选择器

子选择器使用>符号来选择直接嵌套在其他元素内部的元素。它只会选择直接子元素，不会选择更深层次的后代元素。

例如，我们想选择到所有直接嵌套在.parent元素内部的元素，可以使用子选择器：

.parent > p {
  /* 样式属性 */
}

在上述示例中，只有直接嵌套在.parent元素内部的元素才会应用上述样式属性。

相邻兄弟选择器

相邻兄弟选择器使用+符号来选择紧接在特定元素后面的元素。

例如，我们想选择到紧接在.parent元素后面的.sibling元素，可以使用相邻兄弟选择器：

.parent + .sibling {
  /* 样式属性 */
}

在上述示例中，只有紧接在.parent元素后面的.sibling元素才会应用上述样式属性。

通用兄弟选择器

通用兄弟选择器使用~符号来选择与特定元素有相同父元素并位于其后面的所有元素。

例如，我们想选择到所有与.parent元素有相同父元素且位于.parent元素后面的.sibling元素，可以使用通用兄弟选择器：

.parent ~ .sibling {
  /* 样式属性 */
}

在上述示例中，与.parent元素有相同父元素且位于.parent元素后面的所有.sibling元素都会应用上述样式属性。

上下文选择器的应用场景

上下文选择器可以很好地用于选择特定位置的元素，从而更精确地应用样式。

导航菜单：使用上下文选择器可以选择到特定位置的菜单项，应用不同的样式以突出当前页面所在的位置。

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.menu a {
  /* 全部菜单项的样式 */
}

.menu a:hover {
  /* 全部菜单项的悬停样式 */
}

.menu a.active {
  /* 当前页面所在位置的菜单项的样式 */
}

表单样式：使用上下文选择器可以选择到特定位置的表单元素，应用特定的样式来增强用户体验。

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">

  <label for="password">密码：</label>
  <input type="password" id="password" name="password">

  <input type="submit" value="登录">
</form>

form label {
  /* 所有表单标签的样式 */
}

form input[type="text"] {
  /* 所有文本输入框的样式 */
}

form input[type="password"] {
  /* 所有密码输入框的样式 */
}

form input[type="submit"] {
  /* 提交按钮的样式 */
}

列表样式：使用上下文选择器可以选择到列表中的子元素，并应用特定的样式来改变子元素的样式。

<ul class="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

.list li {
  /* 所有列表项的样式 */
}

.list li:first-child {
  /* 第一个列表项的样式 */
}

.list li:last-child {
  /* 最后一个列表项的样式 */
}

.list li:nth-child(2n) {
  /* 偶数位置的列表项的样式 */
}

上述示例中，使用上下文选择器可以选择到列表中的子元素，并应用不同的样式来区分它们的位置。