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{…} 用來指定位於同一個父元素之中，某個元素之後的其他種類兄弟元素所使用的樣式