CSS 组合器

示例

总览

注意：同级选择器的目标是源文档中紧随其后的元素。CSS本质上（级联）不能针对先前或父元素。但是，使用flexorder属性，可以在可视媒体上模拟先前的同级选择器。

后代组合器： selector selector

由至少一个空格字符（）表示的后代组合器选择作为已定义元素的后代的元素。该组合器选择元素的所有后代（从向下的子元素开始）。

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

JSBin现场演示

在上面的示例中，选择了前两个<p>元素，因为它们都是的后代<div>。

儿童组合器： selector > selector

子（>）组合子用于选择那些元件的儿童，或直系后代的指定元素。

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

JSBin现场演示

上面的CSS仅选择第一个<p>元素，因为它是直接从a派生的唯一段落<div>。

<p>未选择第二个元素，因为它不是的直接子元素<div>。

相邻的同级组合器： selector + selector

相邻的同级（+）组合器选择一个紧随指定元素之后的同级元素。

p + p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

JSBin现场演示

上面的例子中只选择那些<p>其元件直接前面通过另一个<p>元件。

普通同级组合器： selector ~ selector

常规的同级（~）组合器选择指定元素之后的所有同级。

p ~ p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

JSBin现场演示

上面的例子中选择所有<p>被元件之前由另一<p>元件，无论它们是否是紧邻。