組合子

概述

注意： 同級選擇器將源文件中後面的元素作為目標。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> 元素，無論它們是否緊鄰。