组合器

后代组合器 — 通常用单个空格 (“ ”) 字符表示 — 组合两个选择器，使得如果第二个选择器匹配的元素具有匹配第一个选择器的祖先（父级、父级的父级、父级的父级的父级等）元素，则选择这些元素。使用后代组合器的选择器称为后代选择器。

body article p

在下面的示例中，我们仅匹配位于类为 .box 的元素内部的 <p> 元素。

子元素组合器 (>) 放在两个 CSS 选择器之间。它仅匹配由第二个选择器匹配的那些元素，这些元素是第一个选择器匹配的元素的直接子元素。层次结构中更深层的后代元素不匹配。例如，要仅选择为 <article> 元素的直接子元素的 <p> 元素

article > p

在下一个示例中，我们有一个有序列表 (<ol>) 嵌套在一个无序列表 (<ul>) 中。子元素组合器仅选择那些为 <ul> 的直接子元素的 <li> 元素，并为其设置顶部边框样式。

如果删除指定其为子元素组合器的 >，则最终会得到一个后代选择器，并且所有 <li> 元素都将获得红色边框。

紧邻兄弟组合器 (+) 放在两个 CSS 选择器之间。它仅匹配由第二个选择器匹配的那些元素，这些元素是第一个选择器匹配的元素的紧邻兄弟元素。例如，要选择所有紧接在 <p> 元素之前的 <img> 元素

p + img

一个常见的用例是对标题后面的段落执行某些操作，如下面的示例所示。在该示例中，我们正在寻找任何与 <h1> 共享父元素并且紧接在该 <h1> 之后的段落。

如果在 <h1> 和 <p> 之间插入其他元素（例如 <h2>），你会发现段落不再与选择器匹配，因此在元素相邻时不会应用背景和前景色。

如果要选择元素的兄弟元素，即使它们不直接相邻，也可以使用后续兄弟组合器 (~)。要选择所有出现在 <p> 元素之后的 <img> 元素，我们会这样做

p ~ img

在下面的示例中，我们正在选择所有出现在 <h1> 之后的 <p> 元素，即使文档中也有 <div>，出现在其之后的 <p> 也将被选中。

CSS 嵌套模块 允许你编写使用组合器创建 复杂选择器 的嵌套规则。

p {
  ~ img {
  }
}
/* This is parsed by the browser as */
p ~ img {
}

& 嵌套选择器 也可以用于创建复杂选择器。

p {
  & img {
  }
}
/* This is parsed by the browser as */
p img {
}

您可以将之前课程中发现的任何选择器与组合器结合使用，以选择文档的一部分。例如，要选择类名为“a”且是<ul>的直接子元素的列表项，请尝试以下操作

ul > li[class="a"] {
}

但是，在创建选择文档非常特定部分的大量选择器列表时要小心。由于您使选择器非常特定于标记中该元素的位置，因此很难重用 CSS 规则。

通常最好创建一个简单的类并将其应用于目标元素。也就是说，如果您需要为文档中的某些内容设置样式，但无法访问 HTML（可能是由于它是由CMS生成的），那么您对组合器的了解将非常有用。

您已到达本文的结尾，但您能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证您是否保留了这些信息——请参阅测试您的技能：选择器。

这是我们关于选择器的课程中的最后一节。接下来，我们将继续学习 CSS 的另一个重要部分——层叠、特异性和继承。

• 上一篇
• 概述：CSS 构建块
• 下一篇