1.屬性選擇器： [id=test] {…} 選擇id=test字元串的元素 [id*=test] {…} 選擇id存在test字元串的元素 [id^=test] {…} 選擇id 以test字元串開頭的元素 [id$=test] {…} 選擇id以test結尾的元素 2.偽類選擇器、偽元素： p: ...
1.屬性選擇器：
[id=test] {…} 選擇id=test字元串的元素
[id*=test] {…} 選擇id存在test字元串的元素
[id^=test] {…} 選擇id 以test字元串開頭的元素
[id$=test] {…} 選擇id以test結尾的元素
2.偽類選擇器、偽元素：
p:first-line{…} 選擇p元素中第一行的文字元素
p:first-letter{…} 選擇p元素中的第一個文字元素
p:before{content:’…’} 選擇p元素，在它之前插入一些內容
p:after{content:’…’} 選擇p元素，在它之後插入一些內容
3.選擇器root、not、empty、和target
:root{background: red;} 設置html文檔的背景色
:not(p){…} 設置非p元素的背景色
:empty{…} 設置當元素內容為空時指定的樣式
:target{…} 設置跳轉到target元素的樣式
4.選擇器first-child、last-child、nth-child、和nth-last-child
li:first-child{…} 選擇父元素中第一個子元素
li:last-child{…} 選擇父元素中最後一個子元素
li:nth-child(2){…} 選擇父元素第2個元素
li:nth-child(4n+4){…} 選擇父元素第4的倍數
li:nth-last-child(2){…} 選擇父元素倒數第2個元素
li:nth-child(add){…} 選擇父元素中正數下來的奇數元素
li:nth-child(even){…} 選擇父元素中正數下來的偶數元素
li:nth-last-child(add){…} 選擇父元素中倒數上去的奇數元素
li:nth-last-child(even){…} 選擇父元素中倒數上去的偶數元素
5.選擇器nth-of-type、nth-last-of-type、和only-child
h2:nth-of-type(add){…} 選擇針對同類型的子元素進行計算，選擇正數下來的奇數元素
h2:nth-of-type(even){…} 選擇針對同類型的子元素進行計算，選擇倒數上去的偶數元素
li:only-child{…} 選擇父元素中只有一個子元素的
6.UI元素狀態偽類選擇器 選擇器e:hover、e:active、e:focue
a:hover{…} 選擇當滑鼠移入到某個元素上面使用的樣式
a:active{…} 選擇當滑鼠按下某個元素並且沒有鬆開時使用的樣式
a:focue{…} 選擇當某個元素獲得游標焦點時候使用的樣式
7.偽類選擇器e:enabled、和e:disabled
e:enabled{…} 用來選擇當前元素處於可用狀態的樣式
e:disabled{…} 用於選擇當前元素處於不開用狀態的樣式
8.偽類選擇器e:read-only、和e:read-write
e:read-only{…} 用來指定當元素處於只讀狀態的樣式
e:read-write{…} 用來指定當元素處於非只讀狀態的樣式
9.偽類選擇器e:checked、e:default、和e:indeterminate、e::selection
e:checked{…} 用來指定當單選框或覆選框處於選中狀態的樣式，火狐瀏覽器為-moz-checked
e:default{…} 用來指定當頁面打開時預設處於選中狀態時的樣式，當用戶改為非選中狀態，樣式依然存在
e:determinate{…} 用來指定當頁面打開時，一組單選款中任何一個都沒有選中時整組的樣式，僅適用Opera
e::selection{…} 用來指定當元素處於指定狀態時候的樣式
10.通用兄弟元素選擇器 e~e
div~p{…} 用來指定位於同一個父元素之中，某個元素之後的其他種類兄弟元素所使用的樣式
