什麼是選擇器？
CSS選擇器就是使樣式找到應用對象。
簡單選擇器（Simple selectors）
在日常開發中，最常用的選擇器，也是最基本的選擇器。
元素選擇器（Type selector）
針對HTML元素的選擇器，用於尋找指定的HTML元素。
a { color: blue; }
p { color: black; }通用選擇器（Universal Selector）
通用選擇器可設置全部的HTML元素，由一個 * 表示。
* { margin: 0; }屬性選擇器（Attribute presence and value selectors）
| 類型 | 描述 |
|---|---|
[title] |
選擇具有 title 屬性的所有元素。 |
[title="baidu"] |
選擇具有 title 屬性且值爲"baidu"的所有元素。 |
[title~="baidu"] |
選擇 title 屬性值中出現的一個用空格分隔的"baidu"的元素。 |
[title^="baidu"] |
選擇 title 屬性值以 "baidu" 開頭的所有元素。 |
[title$="baidu"] |
選擇 title 屬性值以 "baidu" 結尾的所有元素。 |
[title*="baidu"] |
選擇 title 屬性值中包含字串"baidu"的所有元素。 |
以及[title|="baidu"]：選擇 title 屬性值中等於 "baidu"或以 "baidu-"開頭的所有元素。
類選擇器（Class Selectors）
給HTML元素中指定了 class 的元素定義樣式。使用 . 表示。
.large-text { font-size: 18px; }ID選擇器（ID Selectors）
給HTML元素中指定了 id 的元素定義樣式。使用 # 表示。
#main-content { margin: 8px; }組選擇器（Groups of selectors）
將具有相同的樣式的元素，歸爲組合來寫。使用 , 表示。
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }等於
h1, h2, h3 { font-family: sans-serif }僞類選擇器（Pseudo-Classes）
僞類選擇器是需要根據文檔結構之外的其他條件對元素應用樣式。使用 : 表示僞類選擇器。
a:hover{ color: red }僞類選擇器包含兩種：狀態僞類和結構僞類。
狀態僞類
基於HTML元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處於某狀態時會呈現該樣式，而進入另一狀態後，該樣式也會失去。
| 屬性 | 描述 | css版本 |
|---|---|---|
:link |
匹配未被訪問的鏈接的元素。（標籤） | 1 |
:visited |
匹配已被訪問的鏈接的元素。（標籤） | 1 |
:active |
匹配被激活的元素。（如鼠標點擊的瞬間） | 1 |
:hover |
當鼠標懸浮在元素上方時，向元素添加樣式。 | 2 |
:focus |
匹配擁有鍵盤輸入焦點的元素。 | 2 |
:target |
匹配相關URL指向的E元素。 | 3 |
:checked |
匹配處於選中狀態的元素添加樣式。（用於input type爲radio與checkbox時） | 3 |
:enabled |
向處於可用狀態的元素添加樣式。 | 3 |
:disabled |
向處於禁用狀態的元素樣式。 | 3 |
:indeterminate |
表示狀態不確定的表單元素。（用於input type爲radio與checkbox及<progress>時） | 3 |
結構僞類
結構性僞類是css3新增選擇器，利用dom樹進行元素過濾，通過文檔結構的互相關係來匹配元素，能夠減少class和id屬性的定義，使文檔結構更簡潔。
| 屬性 | 描述 | css版本 |
|---|---|---|
:not(s) |
匹配不含有s選擇符的元素。 | 3 |
:first-child |
匹配父元素的第一個子元素E。 | 2 |
:last-child |
匹配父元素的最後一個子元素E。 | 3 |
:only-child |
匹配父元素僅有的一個子元素E。 | 3 |
:nth-child(n) |
匹配父元素的第n個子元素E。 | 3 |
:nth-last-child(n) |
匹配父元素的倒數第n個子元素E。 | 3 |
:first-of-type |
匹配同類型中的第一個同級兄弟元素E。 | 3 |
:last-of-type |
匹配同類型中的最後一個同級兄弟元素E。 | 3 |
:only-of-type |
匹配同類型中的唯一的一個同級兄弟元素E。 | 3 |
:nth-of-type(n) |
匹配同類型中的第n個同級兄弟元素E。 | 3 |
:nth-last-of-type(n) |
匹配同類型中的倒數第n個同級兄弟元素E。 | 3 |
:empty |
匹配沒有任何子元素（包括text節點）的元素。 | 3 |
:root |
匹配文檔根元素。 | |
| 在HTML中，根元素始終是<html>。 | 3 |
其他僞類及相關信息請參考：
僞類
各僞類實現（待完成...）
僞元素選擇器（Pseudo-elements）
僞元素是對元素中的特定內容進行操作，而不是描述狀態。它的操作層次比僞類更深一層，因此動態性比僞類低很多。實際上，僞元素就是選取某些元素前面或後面這種普通選擇器無法完成的工作。控制的內容和元素是相同的，但它本身是基於元素的抽象，並不存在於文檔結構中！
使用 :: 表示僞元素選擇器。
| 屬性 | 描述 | css版本 |
|---|---|---|
::first-letter |
向文本的第一個字母添加特殊樣式。 | 1 |
::first-line |
向文本的首行添加特殊樣式。 | 1 |
::before |
在元素之前添加內容。 | 2 |
::after |
在元素之後添加內容。 | 2 |
::before 和 ::after
::before 和 ::after 被引入CSS中，最核心的目的，還是爲了實現語義化。
使用::before 和 ::after 佈局的閉合問題
.clear::after {
content: '';
display: block;
clear: both;
}組合選擇器
後代選擇器（Descendant combinator）
由於HTML元素之間具有層次結構關係，因此在一些情況下，我們需要根據對應的HTML結構尋找指定的HTML元素。
p span{ color: #999; }
ul li { font-size:14px; }
#main-content div { color: black; }子選擇器（Child combinators）
選擇元素的直接子元素。使用 > 表示。
body > div {
background: #c0c0c0;
height: 100px;
width: 100%;
}
body > div > div {
background: red;
}相鄰選擇器（Next-sibling combinator）
根據一個元素與另一個元素的相鄰關係對它應用樣式。使用 + 表示。
/* 相鄰元素選擇後面的元素進行樣式設置 */
li + li {
border-left: 1px solid #000000;
}一般兄弟選擇器（Subsequent-sibling combinator）
根據一個元素在另外一個元素後面且兩個元素都屬於一個父元素，對後面選擇的元素進行樣式設置。使用 ~ 表示。
/* 選擇後面的元素進行樣式設置 */
p ~ span {
color: red;
}選擇器層疊和特殊性
當你隨機打開一個頁面，查看源代碼，你會發現，同一個元素，不止有一個CSS選擇器及對應的樣式。而一個元素只能應用一個樣式，那麼一堆樣式中究竟是應用哪一個呢？這就涉及到CSS的層疊規則了。
CSS層疊規定了選擇器的特殊性，將特殊性分爲a，b，c，d四個登記，各等級特殊性逐漸降低（即a>b>c>d）。通過選擇器特殊性的比較，實現樣式選擇。
計算規則如下：
- 在
style中寫的內聯樣式或加!important的樣式特殊性爲 1，0，0，0 （!important> 內聯樣式） - 每個ID選擇器的特殊性爲 0，1，0，0
- 每個類、僞類或者屬性選擇器的特殊性爲 0，0，1，0
- 每個元素或僞元素選擇器貢獻特殊性爲 0，0，0，1
- 組合選擇器和通配符的對特殊性沒有貢獻
用style屬性編寫的規則總是比其他任何規則特殊；具有ID選擇器的規則比沒有ID選擇器的規則特殊；具有類選擇器的規則比只有類型選擇器的規則特殊；如果兩個規則的特殊性相同，那麼後定義的規則優先。