Selector 選擇器
解析順序
CSS匹配不是从左到右进行查找，而是从右到左进行查找。
如果从左到右的顺序，那么每条选择器都需要遍历整个DOM树，性能很受影响。
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找, 所以选择器最好写的简洁一点。
Selector種類
如果您对CSS选择器还不太了解，或者说不太清楚CSS有哪些选择器，个人建议你先阅读以下几篇文章，这样更有助于帮助你阅读本文后面的内容：
基本Selector
通用選擇符(*)
假設html如下
<div></div>
<div id="box3">
<p class="item">item</p>
<p class="item">item</p>
<p class="item2">item</p>
</div>
指定任何元素
| 選擇器 | 宣告方式 | 說明 | CSS版本 | 範例 |
| -- | -- | -- | -- | -- |
| 類名選擇符 | * | 指定所有元素 | CSS 1 | * {color:red;} |
| 指定元素類名 | E * | 指定E元素下的所有元素 | CSS 1 | #box3 * {color:red;}|
ID選擇符
指定設定id編號的元素 假設html如下<div>no class</div> <div id="box">idName = box</div> <div id="box2">idName = box2</div> <div id="box3"> <p class="item">item</p> <p class="item">item</p> <p class="item2">item</p> </div>
| 選擇器 | 宣告方式 | 說明 | CSS版本 | 範例 |
|---|---|---|---|---|
| 類名選擇符 | #idName |
指定元素的id為idName的元素 | 1 | #box {color:red;} |
| 指定元素類名 | E#idName |
指定E元素的id為idName的元素 | 1 | div#box2 {color:red;} |
類名選擇符
假設html如下
<div>no class</div>
<div class="box">className = box</div>
<div class="box box2">className = box2</div>
<div class="box3">
<p class="item">item</p>
<p class="item">item</p>
<p class="item2">item</p>
</div>
| 選擇器 | 宣告方式 | 說明 | CSS版本 | 範例 |
|---|---|---|---|---|
| 類名選擇符 | .className |
指定元素的類名為className的元素 | 1 | .box {color:red;} |
| 指定元素類名 | E.className |
指定E元素的類名為className的元素 | 1 | div.box {color:red;} |
| 多类选择器 | .className.className2 |
指定元素的類名符合設定的元素 | IE6不支持 | .box.box2 |
組合選擇符
E为祖先元素，Ｆ为后代元素
假設html如下
<p>上一個結點</p>
<div>
<p>子元素(Child selectors)F元素</p>
<p>
<em>後代元素(descendant selectors)F元素</em>
</p>
</div>
<p>相邻兄弟选择器（Adjacent sibling selector）</p>
<p>相鄰後元素|</p>
| 選擇器 | 宣告方式 | 說明 | CSS版本 | 範例 |
|---|---|---|---|---|
| 後代元素(descendant selectors) | E F |
指定E元素的後代元素F元素 | 1 | div em {color:red;} |
| 子元素(Child selectors) | E > F |
指定E元素子元素F元素 | 2 | div > p {color:red;} |
| 相邻兄弟选择器（Adjacent sibling selector） | E + F |
指定E元素的相鄰元素F元素(只有最靠近的後一個有效) | 2 | div + p {color:red;} |
| 相鄰後元素 | E ~ F |
指定E元素的同級且期後的的F元素 | 3 | div ~ p {color:red;} |
CSS4 已經移除 E!>F和E/foo/F，圖片中CSS4的草案已過時
新增descendant combinatorE>>F
簡單說就是
E>F的強化版The descendant combinator (E >> F) is essentially the same thing as E F. It's just more straightforward and makes the code clearer. - See more at: [CSS4]
屬性選擇符
依照元素屬性做為選擇器
| 宣告方式 | 說明 | CSS版本 | 範例 |
|---|---|---|---|
E[attr] |
指定E元素中含有属性名 | 2 | input[placeholder] {color:red;} |
E[attr="value"] |
指定E元素中含有属性名與等於值 | 2 | input[type="text"] {color:red;} |
E[attr~="value"] |
指定属性名且含有詞 | 2 | input[placeholder~="name"] {margin:10px;} |
E[attr*="value"] |
指定属性名且含有詞 | 2 | input[id*="box"] {margin:10px;} |
E[attr^="value"] |
指定E元素中含有属性名，且值為指定開頭 | 3 | span[for^="radio_box"]{margin:10px;} |
E[attr$="value"] |
指定E元素中含有属性名，且值為指定結尾 | 3 | span[for$="box_1"]{color:red;} |
| 如下 | 指定E元素中含有属性名，且值為指定開頭(value-)或含有值(~) | 2 | 如下 |
E[attr|="value"]
範例:
input[placeholder|="name"]{color:red;}
偽元素選擇符
類型選擇符
偽類選擇符
伪类选择器的形式就是:xxx， 比如:hover, :link, :nth。 动态伪类, UI元素状态伪类, CSS3的:nth选择器
結構型
鏈接
用戶行為
目標
語種
元素狀態
邏輯性
E:dir(ltr)
時間維度
網路結構
Selector兼容性
