某次Code Review學長對我說，你知道選擇器嗎？我說大概知道。他說你要能夠做到我指哪個你就可以選到哪個，所以他就隨意指個地方，問我『你要怎樣才能選得到？』當下的我就像站在夾娃娃機面前想要夾到邊邊那個心有所屬的東西，卻發現自己不會操作眼前的鍵盤ＱㄇＱ~後來，發現原來有超多夾娃娃的技法啊，但熟練才是不二法門，這次要來看看規範這怎寫啦。本次搭配的是：

• 最新版已經到了Selectors Level 4，還在第二階段的W3C Working Draft，所以會搭配Selectors Level 3，目前處於 W3C Recommendation第三階段。
• MDN CSS selectors 搭配MDN一起來看，會有範例比較好懂。

看看規範怎樣說？

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc.
CSS uses Selectors for binding style properties to elements in the document.

• CSS（層疊樣式表）是一種用於描述 HTML 和 XML 文件在螢幕、紙張、語音等上的呈現的語言。
• CSS 使用選擇器將樣式屬性綁定到文件中的元素。

W3C Level3 Selector syntax

Level3 selector選擇器

• A selector is a chain of one or more sequences of simple selectors separated by combinators One pseudo-element may be appended to the last sequence of simple selectors in a selector.

simple selector 簡單選擇器

• A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
• A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Combinators 組合器

• Combinators are whitespace, "greater-than sign" (U+003E, >), "plus sign" (U+002B, +) and "tilde" (U+007E, ~).
• White space may appear between a combinator and the simple selectors around it. 
• Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in whitespace.
• Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of whitespace.

invalid selector 無效選擇器

• An empty selector, containing no sequence of simple selectors and no pseudo-element, is an invalid selector.

W3C Level4 Selector Syntax and Structure

Level4 selector
A selector represents a particular pattern of element(s) in a tree structure. The term selector can refer to a simple selector, compound selector, complex selector, or selector list. The subject of a selector is any element that selector is defined to be about; that is, any element matching that selector.

compound selector 複合選擇器

• A compound selector is a sequence of simple selectors that are not separated by a combinator, and represents a set of simultaneous conditions on a single element.
• If it contains a type selector or universal selector, that selector must come first in the sequence. Only one type selector or universal selector is allowed in the sequence.
• A given element is said to match a compound selector when it matches all simple selectors in the compound selector.

complex selector  複雜選擇器

• A complex selector is a sequence of one or more compound selectors separated by combinators. It represents a set of simultaneous conditions on a set of elements in the particular relationships described by its combinators. (Complex selectors are represented by  in the selectors grammar.)
• A given element is said to match a complex selector when there exists a list of elements, each matching a corresponding compound selector in the complex selector, with each pair of elements consecutive in the list matching the combinator between their corresponding compound selectors, and with the last element being the given element.

selector list 選擇器列表

• A list of simple/compound/complex selectors is a comma-separated list of simple, compound, or complex selectors. This is also called just a selector list when the type is either unimportant or specified in the surrounding prose; if the type is important and unspecified, it defaults to meaning a list of complex selectors. (See § 4.1 Selector Lists for additional information on selector lists and the various <*-selector-list> productions in the grammar for their formal syntax.)
• A given element is said to match a selector list when it matches any (at least one) of the selectors in that selector list.

簡單整理一下

• 選擇器是由『組合器』分隔的一個或多個『簡單選擇器序列』組成的鏈。

• 一個『偽元素』可以附加到選擇器中『簡單選擇器』的排序最『後』面。

• 『簡單選擇器序列』是，不被『組合器(combinators)』分隔的『簡單選擇器』鏈。

• 它總是以『類型選擇器』或『通用選擇器』開頭，序列中不允許有『類型選擇器』或『通用選擇器』。

• 不包含『簡單選擇序列』且不包含『偽元素』的空選擇器，是『無效選擇器』。

• 簡單選擇器可以是以下六種：
  6.1.Type selector 類型選擇器
  6.2.Universal selector 通用選擇器
  6.3.Attribute selectors 屬性選擇器
  6.4.Class selectors 類別選擇器
  6.5.ID selectors ID 選擇器
  6.6.Pseudo-classes 偽類

• Combinators組合器有分為這三大類五個：
  8.1.Descendant combinator 後代組合器
  8.2.Child combinators 子組合器
  8.3.Sibling combinators 兄弟組合器
  8.3.1.Next-sibling combinator 下一個兄弟組合器
  8.3.2.Subsequent-sibling combinator 後續兄弟組合器

Level4 版本增新 Selector Structure，多了compound selectors和 complex selectors與selector list概念，更多參考範例 MDN CSS selector structure。
compound selector 複合選擇器
- 複合選擇器是一系列『未以組合器分隔的簡單選擇器』。
- 如果包含『類型選擇器』或『通用選擇器』，則該選擇器必須，位於序列中第一位。
- 序列中只允許使用一種『類型選擇器』或『通用選擇器』。
- 當給定元素與複合選擇器中的所有簡單選擇器相符時，就稱為『與複合選擇器相符』。
complex selector 複雜選擇器
- 複雜選擇器是由組合器分隔的一個或多個『複合選擇器的序列』。
- 它表示由其組合符描述的『特定關係』中的一組元素的一組同時條件。
- 當存在一個元素列表時，稱『給定元素匹配複雜選擇器』
selector list 選擇器列表
- 以逗號分隔的簡單、複合或複雜選擇器清單。

選擇器是什麼？

由此可知，CSS使用選擇器將樣式屬性綁定到文件中的元素。在Level3版本中，選擇器是個排序鏈（chain）是由各種『簡單選擇器』simple selector採用『組合』Combinators的排序形成的，而到了Level4版本，選擇器則多了compound selector和 complex selector與selector list等概念。看看MDN為我們整理出來的，至少有60個功能和5個組合器，這裡不多一一介紹，直接按連結去玩玩吧！

The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.

MDN CSS selectors