CSS 選擇器，一篇就夠了

摘自 MDN web docs

簡介

選擇器是 CSS 規則的一部分且位於 CSS 聲明塊前。

選擇器能夠被分爲如下類別：

• 簡單選擇器（Simple selectors）：經過元素類型、class 或 id 匹配一個或多個元素。
• 屬性選擇器（Attribute selectors）：經過 屬性 / 屬性值 匹配一個或多個元素。
• 僞類（Pseudo-classes）：匹配處於肯定狀態的一個或多個元素，好比被鼠標指針懸停的元素，或當前被選中或未選中的複選框，或元素是 DOM 樹中一父節點的第一個子節點。
• 僞元素（Pseudo-elements）:匹配處於相關的肯定位置的一個或多個元素，例如每一個段落的第一個字，或者某個元素以前生成的內容。
• 組合器（Combinators）：這裏不只僅是選擇器自己，還有以有效的方式組合兩個或更多的選擇器用於很是特定的選擇的方法。例如，你能夠只選擇 divs 的直系子節點的段落，或者直接跟在 headings 後面的段落。
• 多用選擇器（Multiple selectors）：這些也不是單獨的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個 CSS 規則下面， 以將一組聲明應用於由這些選擇器選擇的全部元素。

簡單選擇器

類型選擇器（又名：元素選擇器）

此選擇器只是一個選擇器名和指定的HTML元素名的不區分大小寫的匹配。這是選擇全部指定類型的最簡單方式。

類選擇器（Class selectors）

類選擇器由一個點「.」以及類後面的類名組成。類名是在HTML class文檔元素屬性中沒有空格的任何值。由你本身選擇一個名字。一樣值得一提的是，文檔中的多個元素能夠具備相同的類名，而單個元素能夠有多個類名(以空格分開多個類名的形式書寫)。

ID 選擇器

ID選擇器由哈希/磅符號 (#)組成，後面是給定元素的ID名稱。 任何元素均可以使用id屬性設置惟一的ID名稱。 由你本身選擇的ID是什麼。 這是選擇單個元素的最有效的方式。

重要提示：一個ID名稱必須在文件中是惟一的。關於重複ID的行爲是不可預測的，好比在一些瀏覽器只是第一個實例計算，其他的將被忽略。

通用選擇器（Universal selector）

通用選擇（*）是最終的王牌。它容許選擇在一個頁面中的全部元素。因爲給每一個元素應用一樣的規則幾乎沒有什麼實際價值，更常見的作法是與其餘選擇器結合使用。

重要提示：使用通用選擇時當心。由於它適用於全部的元素，在大型網頁利用它能夠對性能有明顯的影響：網頁能夠顯示比預期要慢。不會有太多的狀況下，您想使用此選擇。

組合器（Combinators）

在CSS中，組合器容許您將多個選擇器組合在一塊兒，這容許您在其餘元素中選擇元素，或者與其餘元素相鄰。四種可用的類型是：

• 後代選擇器——（空格鍵）——容許您選擇嵌套在另外一個元素中的某個元素（不必定是直接的後代;例如，它能夠是一個孫子）。
• 子選擇器—— > ——容許您選擇一個元素，該元素是另外一個元素的直接子元素。
• 相鄰兄弟選擇器—— + ——容許您選擇一個元素，它是另外一個元素的直接兄弟元素(也就是說，在它的旁邊，在層次結構的同一層)。
• 通用兄弟選擇器—— ~ — —容許您選擇其餘元素的兄弟元素(例如，在層次結構中的相同級別，但不必定就在它的旁邊)。

Combinators	Select
A,B	匹配知足A（和/或）B的任意元素.
A B	匹配任意元素，知足條件：B是A的後代結點（B是A的子節點，或者A的子節點的子節點）
A > B	匹配任意元素，知足條件：B是A的直接子節點
A + B	匹配任意元素，知足條件：B是A的下一個兄弟節點（AB有相同的父結點，而且B緊跟在A的後面）
A ~ B	匹配任意元素，知足條件：B是A以後的兄弟節點中的任意一個（AB有相同的父節點，B在A以後，但不必定是緊挨着A）

注：相鄰兄弟選擇器和通用兄弟選擇器只會「向後」選擇，DOM結構靠前的兄弟元素不在選擇範圍內。

這裏有一個簡單的例子來展現這些工做是如何工做的：

<section>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>
    <h2>Heading 2</h2>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </div>
</section>

section p {
  color: blue;
}

section > p {
  background-color: yellow;
}

h2 + p {
  text-transform: uppercase;
}

h2 ~ p {
  border: 1px dashed black;
}

CSS樣式的HTML以下所示：

<iframe src="https://mdn.github.io/learnin...; class="live-sample-frame" width="100%" frameborder="0" height="270"></iframe>

選擇器是這樣工做的：

• section p選擇了全部的 <p> 元素——前兩個 <p> 都是 <section> 元素的直接子元素，然後面的兩個 <p> 元素是 <section> 元素的孫子元素(它們在 <div>裏面)。所以，全部的段落文本都是藍色的。
• section > p 只選擇前兩個 <p> 元素，這兩個元素是 <section> 元素的直接子元素（但後兩個 <p>元素不是，它們不是直接的子元素）。因此只有前兩段有黃色的背景色。
• h2 + p 只選擇在相同層次結構的 <h2> 元素以後直接相連的 <p> 元素—— 在本例中是第一和第三段。所以，這些文本都是大寫的。
• h2 ~ p 選擇任何在相同的層級上（還有以後的） <h2> 元素的 <p> 元素 ——在這種狀況下，全部的段落符合此條件。所以，全部的這些都有一個虛線的邊界。

屬性選擇器

屬性選擇器是一種特殊類型的選擇器，它根據元素的 屬性和屬性值來匹配元素。它們的通用語法由方括號([]) 組成，其中包含屬性名稱，後跟可選條件以匹配屬性的值。 屬性選擇器能夠根據其匹配屬性值的方式分爲兩類： 存在和值屬性選擇器 和 子串值屬性選擇器。

存在和值（Presence and value）屬性選擇器

這些屬性選擇器嘗試匹配精確的屬性值：

• [attr]：該選擇器選擇包含 attr 屬性的全部元素，不論 attr 的值爲什麼。
• [attr=val]：該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。
• [attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的全部元素，好比位於被空格分隔的多個類（class）中的一個類。

子串值（Substring value）屬性選擇器

這種狀況的屬性選擇器也被稱爲「僞正則選擇器」，由於它們提供相似 regular expression 的靈活匹配方式（但請注意，這些選擇器並非真正的正則表達式）：

• [attr|=val] : 選擇attr屬性的值以val（包括val）或val-開頭的元素（-用來處理語言編碼）。
• [attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。
• [attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。
• [attr*=val] : 選擇attr屬性的值中包含字符串val的元素。

僞類和僞元素

僞類（Pseudo-class）

一個 CSS 僞類（pseudo-class） 是一個以冒號(:)做爲前綴的關鍵字，當你但願樣式在特定狀態下才被呈現到指定的元素時，你能夠往元素的選擇器後面加上對應的僞類（pseudo-class）。你可能但願某個元素在處於某種狀態下呈現另外一種樣式，例如當鼠標懸停在元素上面時，或者當一個 checkbox 被禁用或被勾選時，又或者當一個元素是它在 DOM 樹中父元素的第一個孩子元素時。

:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

僞元素

僞元素（Pseudo-element）跟僞類很像，但它們又有不一樣的地方。它們都是關鍵字 —— 但此次僞元素前綴是兩個冒號 (::) —— 一樣是添加到選擇器後面達到指定某個元素的某個部分。

::after::before::first-letter::first-line::selection::backdrop