css的選擇器位于css聲明塊前
選擇器可以分為以下類別：
- 簡單選擇器
Simple selectors: 通過元素類型、class或id匹配一個或多個元素。 - 屬性選擇器
Attribute Selectors: 通過屬性/屬性值匹配一個或多個元素。 - 偽類
Pseudo-classes: 匹配處于確定狀態(tài)的一個或多個元素， 比如被鼠標(biāo)懸停的元素?；虮划?dāng)前選中或未選中的復(fù)選框， 或者是DOM樹中的一個父節(jié)點的第一個子節(jié)點。 - 偽元素
Pseudo-elsments: 匹配處于相關(guān)的確定位置的一個或多個元素， 例如每個段落的第一個字，或者某個元素之前生成的內(nèi)容。 - 組合器
Combinators: 以有效的方式組合兩個或以上的選擇器用于非常特定的方法。 例如，你可以只選擇divs的直系子節(jié)點的段落， 或者直接跟在headding后面的段落。 - 多用選擇器
Multiple selectors: 以逗號分隔開的多個選擇器放在一個css規(guī)則下面， 將一組聲明應(yīng)用于這些選擇器的所有元素。
簡單選擇器
1. 類型選擇器（又名： 元素選擇器）
此選擇器只是一個選擇器名和指定HTML元素名的不區(qū)分大小寫的匹配。這是選擇所有指定類型的最簡單方式。
2. 類選擇器（Class selectors）
類選擇器由一個點 ”.“和類后面的類名組成。類名是在HTML class文檔元素中沒有空格的任何值。文檔中的多個元素可以具有相同的類名， 而單個元素可以有多個類名（以空格分開多個類名的形式書寫）。
3. ID選擇器
ID選擇器由哈希/磅符號（#）組成， 后面是給定元素ID名稱。 任何元素都可以使用id屬性設(shè)置唯一的ID名稱。ID選擇器是選擇單個元素最有效的方式。
注意： 一個ID名稱必須在一個文件中是唯一的。關(guān)于重復(fù)ID的行為是不可預(yù)測的， 比如在一些瀏覽器只是第一個實例計算， 其余的將被忽略。
4. 通用選擇器（Universal selectors）
通用選擇器（*）是最終的王牌。 它允許選擇一個頁面中的所有元素。 由于給每個元素應(yīng)用相同規(guī)則幾乎沒有什么實際價值， 更常見的做法是與其他選擇器結(jié)合使用。
5. 組合器（Combinators）
在css中，組合器允許將多個選擇器結(jié)合使用，這允許在其他元素中選擇元素， 或者與其他元素相鄰，如下：
| Combinators | Select |
|---|---|
| A,B | 匹配滿足 A 或 B的任意元素 |
| A B | 匹配B是A的后代節(jié)點 （B是A的子節(jié)點， 或者A的子節(jié)點的子節(jié)點） |
| A > B | 匹配 B是A的直接子節(jié)點 |
| A + B | 匹配 B是A的下一個兄弟節(jié)點(AB有相同的父節(jié)點，并且B緊跟在A的后面) |
| A~ B | 匹配 B是A之后的兄弟節(jié)點中的任意一個（AB有相同的父節(jié)點， B在A之后，但不一定是緊挨著A） |
注： 相鄰兄弟選擇器和通用兄弟選擇器只會”向后“選擇， DOM結(jié)構(gòu)靠前的兄弟元素不在選擇范圍內(nèi)。
屬性選擇器
屬性選擇器是一種特殊類型的選擇器， 它根據(jù)元素的屬性和屬性值類匹配元素。 它們的通用語法由方括號（[]）組成， 其中包含屬性名稱， 后跟可選條件以匹配屬性的值。屬性選擇器可以根據(jù)其匹配屬性值的方式分為兩類：
1. 存在和值（Presence and value）屬性選擇器
這些屬性選擇器嘗試匹配精確的屬性值：
- [attr]: 該選擇器選擇包含 attr 屬性的所有元素， 不論attr的值為何。
- [attr=val]: 該選擇器僅選擇 attr 屬性被賦值為val的所有元素。
- [attr~=val]: 該選擇器僅選擇 attr屬性的值（以空格間隔出多個值）中包含val值得所有元素， 比如被空格分隔的多個類（class）中的一個類、
2. 子串值（Substring value）屬性選擇器
這種情況的屬性選擇器也被稱為”偽正則選擇器“， 因為他們提供以 regular expression 的靈活匹配方式（但請注意，這些選擇器并不是真正的正則表達(dá)式）： - [attr|=val]: 選擇attr屬性以val(包括val)或以val-開頭的元素 （-用來處理語言編碼)
- [attr^val]: 選擇attr屬性的值以val開頭(包括val)的元素
- [attr$=val]: 選擇attr屬性的值以val結(jié)尾（包括val）的元素
- [attr*=val]: 選擇attr屬性的值中包含字符串val的元素
偽類和偽元素
1.偽類（Pseudo-class）
一個css偽類是以一個冒號（:）作為前綴的關(guān)鍵字， 當(dāng)你希望在特定狀態(tài)下才被呈現(xiàn)到指定元素時， 可以在元素選擇器后面加上對應(yīng)的偽類（pseude-class）。你可能希望某個元素在處于某種狀態(tài)下呈現(xiàn)另一種樣式。例如當(dāng)鼠標(biāo)懸停在元素上面時，或者當(dāng)一個checkbox被禁用或被勾選時，又或者當(dāng)一個元素是它在DOM數(shù)中父元素的第一個孩子元素時。
: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
2.偽元素
偽元素（Pseudo-element）跟偽類很像， 但它們又有不同的地方。它們都是關(guān)鍵字，但這次偽元素前綴是兩個冒號（::）,同樣是添加到選擇器后面達(dá)到指定某個元素的某個部分。書寫上：偽元素最大程度可使用雙冒號，偽類使用單冒號。
運用上：每個選擇器最多只能使用一個偽元素，每個選擇器可以使用多個偽類；
::after
::before
::first-letter
::first-line
::selection
::backdrop
