CSS 组合器

CSS 组合器

理解组合器

在 CSS 中，组合器（Combinators）是用于选择器中的特殊字符，用来定义选择器不同部分之间的关系。它们允许你根据元素在 HTML 文档结构中相对于其他元素的位置来选择元素。

一个 CSS 选择器可以包含多个由组合器连接的简单选择器，以创建更精确的选择规则。

CSS 中有四种主要的组合器：

• 后代选择器（空格）
• 子选择器（>）
• 相邻同级选择器（+）
• 通用同级选择器（~）

我们来分别探讨一下。

后代选择器（空格）

后代选择器用空格表示，用于选择指定元素的后代元素。后代可以是子元素、孙子元素、曾孙子元素等等——即嵌套在指定的祖先元素内的任何层级的元素。

示例：选择所有位于 <div> 元素内部任意位置的 <p> 元素：

div p {
  background-color: lightblue;
}

这条规则将适用于 <div> 内的 <p> 元素，即使它们之间还嵌套了其他元素（例如 <div><section><p>...</p></section></div>）。

子选择器（>）

子选择器用大于号（>）表示，用于选择指定元素的直接子元素。它只选择紧接着下一层嵌套的元素。

示例：仅选择是 <div> 元素的直接子元素的 <p> 元素：

div > p {
  background-color: lightcoral;
}

在结构 <div><p>Direct Child</p><section><p>Not a Direct Child</p></section></div> 中，只有第一个 <p> 会被 div > p 选择。

相邻同级选择器（+）

相邻同级选择器用加号（+）表示，用于选择指定元素的紧接着的同级元素。这两个元素必须拥有相同的父元素，并且第二个元素在 HTML 源代码顺序中必须紧跟在第一个元素之后。

示例：选择紧接着 <div> 元素的第一个 <p> 元素：

div + p {
  background-color: lightgreen;
}

在结构 <div>...</div><p>Adjacent Sibling</p><p>Another Sibling</p> 中，只有 div 后面的第一个 <p> 会被选择。

通用同级选择器（~）

通用同级选择器用波浪号（~）表示，用于选择与指定元素同级且在 HTML 源代码顺序中位于其后的所有元素。与相邻同级选择器不同，这些元素不必紧邻，但它们必须拥有相同的父元素。

示例：选择所有与 <div> 元素同级且位于其后的 <p> 元素：

div ~ p {
  background-color: gold;
}

在结构 <div>...</div><h2>Title</h2><p>Sibling 1</p><p>Sibling 2</p> 中，两个 <p> 元素都会被选择，因为它们与 div 同级且出现在其后。

实际应用

组合器对于编写精确的 CSS 规则至关重要。例如，你可以使用子选择器（>）来区分导航菜单中直接列表项的样式与子菜单中嵌套列表项的样式，或者使用相邻同级选择器（+）来仅在连续的段落之间添加间距。