站長資訊網(wǎng)css3選擇器有：“[att^="val"]”、“[att$="val"]”、“[att*="val"]”、“:root”、“:nth-child(n)”、“:last-child”、“:only-child”、“:empty”等等。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3新增的選擇器
屬性選擇器（除IE6外的大部分瀏覽器支持）
E[att^="val"] 屬性att的值以"val"開頭的元素
E[att$="val"] 屬性att的值以"val"結(jié)尾的元素
E[att*="val"] 屬性att的值包含"val"字符串的元素
實例：p[id^="nav"] {background:#000;}
結(jié)構(gòu)偽類選擇器（過濾選擇器）
（注：FireFox 1.5/2.0/3.0 支持E:root，F(xiàn)ireFox 3.0支持E:last-child、E:empty，由于IE6/7/8不支持，所以選擇合適的場景用吧）
| 序號 | 選擇器 | 含義 | 實例 |
|---|---|---|---|
| 1 | E:root | 匹配文檔的根元素，對于HTML文檔，就是HTML元素 | |
| 2 | E:nth-child(n) | 匹配其父元素的第n個子元素，第一個編號為1 | p:nth-child(3) { color:#f00; } |
| 3 | E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個子元素，第一個編號為1 | p:last-child { background:#ff0; } |
| 4 | E:nth-of-type(n) | 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素 | p:nth-of-type(2){color:red;}選擇父元素的第n個子元素p |
| 5 | E:nth-last-of-type(n) | 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素 | |
| 6 | E:last-child | 匹配父元素的最后一個子元素，等同于:nth-last-child(1) | |
| 7 | E:first-of-type | 匹配父元素下使用同種標(biāo)簽的第一個子元素，等同于:nth-of-type(1) | |
| 8 | E:last-of-type | 匹配父元素下使用同種標(biāo)簽的最后一個子元素，等同于:nth-last-of-type(1) | |
| 9 | E:only-child | 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) | p:only-child { background:#ff0; } |
| 10 | E:only-of-type | 匹配父元素下使用同種標(biāo)簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) | |
| 11 | E:empty | 匹配一個不包含任何子元素的元素，注意，文本節(jié)點也被看作子元素 | p:empty { background:#ff0; } |
UI狀態(tài)偽類選擇器（IE6/7/8不支持）
| 序號 | 選擇器 | 含義 | 實例 |
|---|---|---|---|
| 1 | E:enabled | 匹配表單中激活的元素 | |
| 2 | E:disabled | 匹配表單中禁用的元素 | input[type="text"]:disabled { background:#ddd; } |
| 3 | E:checked | 匹配表單中被選中的radio（單選框）或checkbox（復(fù)選框）元素 | |
| 4 | E::selection | 匹配用戶當(dāng)前選中的元素 |
級元素通用選擇器
| 序號 | 選擇器 | 含義 | 實例 |
|---|---|---|---|
| 1 | E ~ F | 匹配任何在E元素之后的同級F元素 | p ~ ul { background:#ff0; } |
反選偽類
| 序號 | 選擇器 | 含義 | 實例 |
|---|---|---|---|
| 1 | E:not(s) | 匹配不符合當(dāng)前選擇器的任何元素 | :not(p) { border:1px solid #ccc; } |
：target偽類
| 序號 | 選擇器 | 含義 | 實例 |
|---|---|---|---|
| 1 | E:target | 匹配文檔中特定"id"點擊后的效果 |
（學(xué)習(xí)視頻分享：css視頻教程）
