组合子

概述

注意： 同级选择器将源文档中后面的元素作为目标。CSS 本质上（它的级联）不能以前一个或父元素为目标。但是，使用 flex order 属性，可以在可视媒体上模拟先前的兄弟选择器 。

后裔组合：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> 元素，因为它是直接来自 <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> 元素。

General Sibling Combinator：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> 元素，无论它们是否紧邻。