1.1. 屬性選擇器
- [att*=val]
選中name值包含person的input元素：
input[name*=person]
- [att^=val]
選中name值以person打頭的input元素：
input[name^=person]
- [att$=val]
選中name值以person收尾的input元素：
input[name$=person]
1.2 偽類選擇器
偽類選擇器與類選擇器的區(qū)別是，類選擇器可以隨便起名，而偽類選擇器是CSS中已定義好的選擇器抢蚀。
CSS中最常用的偽類選擇器是使用在a元素上的幾種選擇器：
a:link {color:#FF0000; text-decoration:none}
a:visited {color:#00FF00; text-decoration:none}
a:hover {color:#FF00FF; text-decoration:none}
a:active {color:#0000FF; text-decoration:none}
1.3. 偽元素選擇器
并不是對(duì)真正的元素使用的選擇器风响，而是針對(duì)CSS中已定義好的偽元素使用的選擇器
- first-line偽元素選擇器
對(duì)段落的第一行進(jìn)行著色：
p:first-line {color:#0000FF}
- first-letter偽元素選擇器
對(duì)段落的首字符著色：
p:first-letter {color:#0000FF}
- before偽元素選擇器
給每個(gè)列表項(xiàng)設(shè)置前導(dǎo)項(xiàng)目符●：
li:before {content: ●}
- after偽元素選擇器
給每個(gè)列表項(xiàng)后面插入某段文字：
li:after {content: "（僅用于測試，請(qǐng)勿用于商業(yè)用途羡亩。）"}
1.4. 結(jié)構(gòu)性偽類選擇器
結(jié)構(gòu)性偽類選擇器的共同特征是允許開發(fā)者根據(jù)文檔樹中的結(jié)構(gòu)指定元素的樣式摩疑。
- root選擇器
root選擇器將樣式綁定到文檔樹的根元素上，在HTML頁面中就是<html>元素畏铆。
將整個(gè)網(wǎng)頁背景設(shè)置為黃色雷袋，body元素的背景色設(shè)為綠色：
:root {background-color: yellow;}
body {background-color: limegreen;}
- not選擇器
指定body的背景色為黃色，派出h1元素：
body *:not(h1) {background-color: yellow;}
- empty選擇器
指定表格中空單元格的背景色為黃色：
table td:empty{background-color: yellow;}
- target選擇器
我們把id被當(dāng)作超鏈接來使用的元素辞居，稱為target元素楷怒。target選擇器可作用于此類元素。
只在用戶點(diǎn)擊了頁面中的超鏈接瓦灶，并且跳轉(zhuǎn)到target元素后起作用鸠删，樣式起作用：
target {background-color: yellow}
- first-child和last-child選擇器
指定第一個(gè)和最后一個(gè)列表元素的樣式
li:first-child {background-color: yellow;}
li:last-child {background-color: skyblue;}
- nth-child和nth-last-child選擇器（IE8不支持）
指定第二個(gè)和倒數(shù)第二個(gè)列表元素的樣式：
li:nth-child(2) {background-color: yellow;}
li:nth-last-child(2) {background-color: yellow;}
循環(huán)指定列表項(xiàng)的樣式：
li:nth-child(4n+1) {background-color: yellow;}
li:nth-child(4n+2) {background-color: limegreen;}
li:nth-child(4n+3) {background-color: red;}
li:nth-child(4n+4) {background-color: white;}
指定表格奇數(shù)行與偶數(shù)行指定不同背景樣式：
li:nth-child(odd) {background-color: yellow;}
li:nth-child(even) {background-color: skyblue;}
- nth-of-type和nth-last-of-type選擇器（IE8不支持）
nth-child選擇器在計(jì)算子元素是第奇數(shù)個(gè)還是第偶數(shù)個(gè)時(shí)，是連同父元素的所有子元素一起計(jì)算的贼陶。因此刃泡，如果奇偶樣式未能達(dá)到預(yù)期效果，可使用nth-of-type和nth-last-of-type代替：
li:nth-of-type(odd) {background-color: yellow;}
li:nth-of-type(even) {background-color: skyblue;}
- only-child選擇器
指定當(dāng)列表項(xiàng)只有唯一一項(xiàng)時(shí)的列表樣式：
li:only-child {background-color: yellow;}
1.5. UI元素狀態(tài)偽類選擇器
當(dāng)元素處于某種狀態(tài)下時(shí)才起作用碉怔，默認(rèn)狀態(tài)下不起作用烘贴。在CSS3中，共有17種UI元素狀態(tài)選擇器（除了hover和focus外撮胧，IE8支持都不太好）：
- E:hover：鼠標(biāo)指針移上去時(shí)應(yīng)用樣式
- E:active：鼠標(biāo)在元素上按下但未松開時(shí)應(yīng)用樣式
- E:focus：元素獲得光標(biāo)時(shí)應(yīng)用樣式
- E:enabled：元素處于可用狀態(tài)時(shí)應(yīng)用樣式
- E:disabled：元素處于不可用狀態(tài)時(shí)應(yīng)用樣式
- E:read-only：元素只讀時(shí)的應(yīng)用樣式（FireFox中需要加-moz-前綴）
- E:read-write: 元素非只讀時(shí)應(yīng)用樣式（FireFox中需要加-moz-前綴）
- E:checked：單選或復(fù)選按鈕選中時(shí)應(yīng)用樣式
- E:selection：內(nèi)容選中時(shí)應(yīng)用樣式
- E:defalut（各瀏覽器支持均不太好桨踪，不做了解）
- E:indeterminate（各瀏覽器支持均不太好，不做了解）
- E:invalid：元素內(nèi)容不能通過HTML5諸如required芹啥、pattern等屬性的檢查锻离，或元素內(nèi)容不符合規(guī)定格式（例如通過type屬性值為Email的input元素來限定元素內(nèi)容必需為有效的Email格式）時(shí)應(yīng)用樣式
- E:valid：與E:invalid相反
- E:required：指定允許使用required屬性铺峭，且已指定required屬性的input、select及textarea元素的樣式
- E:optional：指定允許使用required屬性纳账，且未指定required屬性的input逛薇、select及textarea元素的樣式
- E:in-range：指定當(dāng)元素有效值被限定在一定范圍之內(nèi)（min屬性值與max屬性值來限定），且實(shí)際輸入值在該范圍之內(nèi)時(shí)使用的樣式
- E:out-of-range：指定當(dāng)元素有效值被限定在一定范圍之內(nèi)（min屬性值與max屬性值來限定）疏虫，且實(shí)際輸入值在該范圍之外時(shí)使用的樣式
1.6. 通用兄弟元素選擇器
指定div的同輩p兄弟元素的樣式：
div ~ p {background-color: #00FF00;}
