CSS 選擇器和組合器

選擇器的型別

有超過 80 種選擇器和組合器。根據可選擇的元素型別，CSS 選擇器可分為以下幾類。

基本選擇器

型別選擇器用於選擇所有具有給定節點名稱的元素。例如，div 將選擇所有 <div> 元素，而 input 將匹配任何 <input> 元素。通配選擇器用星號（*）表示，是一種特殊的型別選擇器，用於選擇所有元素。

類選擇器用於選擇所有具有給定 class 屬性的元素，其表示方法為在類名前加上一個句點（.）。例如，.index 將匹配任何具有 class="index" 的元素。ID 選擇器根據元素的 id 屬性值來選擇元素。其選擇器為 id 前加上一個“井號”（U+0023，#）。例如，#toc 將匹配具有 id="toc" 的元素。class 和 id 都是全域性屬性。一個文件中應該只有一個具有給定 id 的元素；但如果存在多個，ID 選擇器將匹配所有具有該 id 的元素。

當將型別選擇器或通配選擇器與類選擇器或 ID 選擇器組合成複合選擇器時，型別選擇器或通配選擇器必須在類或 ID 之前。

CSS

在這個例子中，我們使用上述四種基本選擇器型別，聲明瞭四個簡單選擇器和一個複合選擇器。

* {
  font-style: italic;
}
p {
  color: red;
}
.myClass {
  text-decoration: underline;
}
#myId {
  font-family: monospace;
}
p.myClass#myId {
  font-size: 1.5rem;
}

HTML

<p class="myClass" id="myId">I match everything.</p>
<p>I match the universal and type selectors only.</p>

結果

組合器

使用 CSS 組合器，我們可以組合選擇器，根據 DOM 節點與文件節點樹中其他元素的關係來選擇它們。這種選擇器與組合器的結合建立了複雜選擇器。

後代組合器

後代組合器，用一個或多個空格表示，選擇作為第一個元素的後代節點。例如，div span 將匹配所有位於 <div> 元素內部的 <span> 元素。

子組合器

子組合器比後代組合器更具體。子組合器用大於號（>）表示，選擇作為第一個元素的直接子節點的節點。與前面的例子相比，div > span 將只匹配作為 <div> 元素直接子元素的 <span> 元素。

後續兄弟組合器

除了後代選擇器，CSS 還允許根據兄弟元素來選擇元素。後續兄弟組合器用波浪號（~）表示，用於選擇兄弟元素。對於 A ~ B，如果匹配 B 的所有元素前面有 A，並且 A 和 B 共享同一個父元素，那麼這些 B 元素都將被選中。例如，h2 ~ p 將匹配所有跟在 h2 後面的 <p> 元素，無論是否緊鄰。

相鄰兄弟組合器

相鄰兄弟組合器用加號（+）表示，與後續兄弟組合器類似。但是，對於 A + B，它只匹配緊跟在 A 後面的 B，且兩者共享同一個父元素。修改我們之前的例子，h2 + p 將只匹配緊跟在 <h2> 元素後面的那一個 <p> 元素。

列組合器

還有一個列組合器，用兩個豎線（||）表示，在受支援的情況下，用於選擇屬於某一列的節點。例如，col || td 將匹配所有屬於 <col> 作用域的 <td> 元素。

名稱空間分隔符

名稱空間分隔符是另一種組合器，通常與 @namespace 規則一起使用。該組合器由一個豎線（|）表示。它能夠將型別選擇器和通配選擇器限制在特定的名稱空間內。例如，透過定義一個名稱空間，如 @namespace SVG url('http://www.w3.org/2000/svg');，你可以使用僅針對巢狀在 SVG 名稱空間中的元素的選擇器。宣告 SVG|a 將匹配 SVG 中的連結，而不是文件其餘部分的連結。名稱空間對於在 HTML 中定位 MathML、SVG 或其他基於 XML 的內容非常有用。

CSS

在這個例子中，我們使用簡單選擇器和組合器聲明瞭五個關係選擇器。

h2 + p ~ p {
  font-style: italic;
}
h2 + p + p {
  color: red;
}
.myClass + p {
  text-decoration: underline;
}
#myId > .myClass {
  outline: 3px dashed red;
}
* > p {
  font-size: 1.1rem;
}

HTML

<h2 class="myClass" id="myId">
  No selectors match. <span class="myClass">This span has an outline</span> as
  it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
  The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
  Does not have an outline; this is a sibling of H2, not a child. It is italic
  and 1.1rem.
</p>

結果

使用 CSS 巢狀建立複雜選擇器

上述複雜選擇器也可以使用簡單選擇器、組合器和 CSS 巢狀來定義，無論是否使用 & 巢狀選擇器。

CSS

在這個例子中，我們使用簡單選擇器和組合器複製了相同的五個關係選擇器，但這次使用了 CSS 巢狀。

h2 {
  & + p {
    & ~ p {
      font-style: italic;
    }
    & + p {
      color: red;
    }
  }
}
.myClass {
  & + p {
    text-decoration: underline;
  }
}
#myId {
  & > .myClass {
    outline: 3px dashed red;
  }
}
* {
  & > p {
    font-size: 1.1rem;
  }
}

HTML

<h2 class="myClass" id="myId">
  No selectors match. <span class="myClass">This span has an outline</span> as
  it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
  The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
  Does not have an outline; this is a sibling of H2, not a child. It is italic
  and 1.1rem.
</p>

結果

屬性選擇器

屬性選擇器用於選擇所有具有給定屬性或屬性值與子字串匹配的元素，具體取決於選擇器的寫法。例如，[type] 將匹配所有設定了 type 屬性（任何值）的元素，而 [type="submit"] 將匹配 <input type="submit"> 和 <button type="submit">，或任何設定了 type="submit" 的元素，即使這個屬性值對只在 <input> 和 <button> 元素上受支援。匹配是大小寫不敏感的。

屬性的大小寫敏感性取決於語言。通常，在 HTML 中，如果一個屬性是列舉的，那麼選擇器中的值是大小寫不敏感的，即使該值不是列舉值之一，或者該屬性對於設定它的元素來說不是一個有效值。對於非列舉屬性，如 class、id 或任何 data-* 屬性，或者對於非 HTML 屬性，如 role 或 aria-* 屬性，值的匹配是大小寫敏感的；可以透過大小寫不敏感修飾符（i）使其不區分大小寫。

偽類選擇器

CSS 選擇器模組定義了超過 60 種偽類。偽類是簡單選擇器，以冒號（:）為字首，允許根據文件樹中不包含的狀態資訊來選擇元素。偽類可用於根據元素的狀態來設定樣式。例如，:target 簡單選擇器用於定位 URL 中包含片段識別符號的元素，而 a:visited 複合選擇器則匹配所有使用者已訪問過的 <a> 元素。

偽類可以分為元素顯示狀態、輸入、語言、位置、資源狀態、時間維度、樹結構、使用者行為和功能性偽類。

多個偽類可以組合成複合選擇器。當將偽類與型別選擇器或通配選擇器組合成複合選擇器時，偽類必須跟在型別選擇器或通配選擇器（如果存在）之後。

偽元素選擇器

並非所有的 CSS 選擇器都在CSS 選擇器模組中定義。CSS 偽元素選擇器是在 CSS 偽元素模組中定義的。

CSS 偽元素以兩個冒號（::）為字首，代表不包含在 HTML 中的實體。例如，簡單的 ::marker 選擇器用於選擇列表項的專案符號，而複合選擇器 p::first-line 則匹配所有 <p> 元素的第一行。

規範

有關偽類和偽元素的詳細資訊，請參閱其規範表。

另見

• 選擇器列表
• CSS 選擇器結構
• 優先順序
• CSS 巢狀模組