文章主要介紹什么是CSS選擇器夫凸，CSS選擇器的分類以及CSS選擇器的優(yōu)先級(jí)三部分內(nèi)容照雁，希望能夠幫助到正在學(xué)習(xí)CSS的童鞋，有什么不足的地方歡迎大家批評(píng)指正晦溪。
一瀑粥、什么是CSS選擇器？
CSS選擇器又被稱為CSS樣式三圆、CSS屬性選擇器狞换。是由css命名及后面屬性及屬性值構(gòu)成一個(gè)整體。
二舟肉、CSS選擇器的分類
1.基礎(chǔ)選擇器
a.id選擇器：通過(guò)設(shè)置元素的id屬性為該元素制定ID修噪。ID由開(kāi)發(fā)者指定。每個(gè)ID在文檔中必須是唯一的路媚。在寫(xiě)樣式表時(shí)黄琼，ID選擇器是以#開(kāi)頭的。
HTML
<div id="header">我的前端學(xué)習(xí)之旅</div>
CSS
header{color:blue;}
執(zhí)行效果：
b.class選擇器：是以獨(dú)立于文檔元素的方式來(lái)指定樣式整慎，使用類選擇器之前需要在html元素上定義類名脏款，也就是要保證類名在html標(biāo)記中存在。
HTML
<div class="header">我的前端學(xué)習(xí)之旅</div>
CSS
.header{color:green;}
執(zhí)行效果：
c.元素選擇器：通過(guò)note節(jié)點(diǎn)名稱匹配元素裤园。
HTML
<span> Here is a span.</span>
CSS
執(zhí)行效果：span{
background-color:blue;
border:1px solid #ccc;
}
2.屬性選擇器：
| 選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| E[attr] | 匹配所有具有屬性attr的元素 | p[title] { color:#f00; } |
| E[att=val] | 匹配所有att屬性等于"val"的E元素 | div[class=error] { color:#f00; } |
| E[att~=val] | 匹配所有att屬性具有多個(gè)空格分隔的值撤师、其中一個(gè)值等于"val"的E元素 | td[headers~=col1] { color:#f00; } |
| E[att/=val] | 匹配所有att屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值、其中一個(gè)值以"val"開(kāi)頭的E元素拧揽，主要用于lang屬性剃盾，比如"en"、"en-us"淤袜、"en-gb"等等 | p[lang/=en] { color:#f00; } |
注意：最后一個(gè)選擇器是E[attr|=val]痒谴，由于輸入|會(huì)對(duì)表格造成影響，只能用/代替铡羡。
CSS3新增了一些屬性選擇器积蔚，待持續(xù)更新。
3.組合選擇器
| 選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| E,F | 多元素選擇器蓖墅，同時(shí)匹配所有E元素或F元素库倘，E和F之間用逗號(hào)分隔 | div,p { border:1px solid #ccc;} |
| E F | 后代元素選擇器，匹配所有屬于E元素后代的F元素论矾，E和F之間用空格分隔 | div p{color:red;} |
| E > F | 子元素選擇器教翩，匹配所有E元素的子元素F | div > strong { color:#f00; } |
| E + F | 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級(jí)元素F | p + p { color:#f00; } |
示例如下：
實(shí)現(xiàn)效果如下：
4.偽類選擇器
| 選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| E:first-child | 匹配父元素的第一個(gè)子元素 | p:first-child { font-style:italic; } |
| E:link | 匹配所有未被點(diǎn)擊的鏈接 | |
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 | |
| E:active | 匹配鼠標(biāo)已經(jīng)其上按下贪壳、還沒(méi)有釋放的E元素 | |
| E:hover | 匹配鼠標(biāo)懸停其上的E元素 | input[type=text]:focus:hover { background:#fff; } |
| E:focus | 匹配獲得當(dāng)前焦點(diǎn)的E元素 | input[type=text]:focus { color:#000; background:#ffe; } |
| E:lang(c) | 匹配lang屬性等于c的E元素 | q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } |
示例如下：
執(zhí)行效果：
鼠標(biāo)點(diǎn)擊之前：
鼠標(biāo)點(diǎn)擊之后：
CSS3新增的一些偽類選擇器之后會(huì)持續(xù)更新的饱亿，敬請(qǐng)期待。
三、選擇器的優(yōu)先級(jí)
從高到低依次是：
1.在屬性后面使用 !important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義
實(shí)際上彪笼，同一個(gè)元素可以使用多個(gè)規(guī)則來(lái)指定它的字體顏色钻注，每個(gè)規(guī)則都有自己的選擇器。顯然最終只有一個(gè)規(guī)則起作用（不可能一個(gè)字既是紅色又是綠色）配猫，那么該規(guī)則的特殊性最高幅恋，特殊性即css優(yōu)先級(jí)。那么CSS的優(yōu)先級(jí)怎么計(jì)算呢泵肄？
選擇器的特殊性值表述為4個(gè)部分捆交，用0,0,0,0表示。
- ID選擇器的特殊性值腐巢，加0,1,0,0;
- 類選擇器品追、屬性選擇器或偽類，加0,0,1,0;
- 元素和偽元素冯丙，加0,0,0,1;
- 通配選擇器對(duì)特殊性沒(méi)有貢獻(xiàn)肉瓦，即0,0,0,0;
- 最后比較特殊的一個(gè)標(biāo)志!important(權(quán)重)，它沒(méi)有特殊值胃惜，但是他的優(yōu)先級(jí)是最高的泞莉，為了方便記憶，可認(rèn)為他的默認(rèn)值是1,0,0,0.
示例如下：
執(zhí)行效果：
選擇器的特殊性值是從左向右排列的
先說(shuō)到這里吧蛹疯，有什么問(wèn)題歡迎大家指正戒财，剩下的內(nèi)容稍后會(huì)在wlf'Blog更新，敬請(qǐng)關(guān)注捺弦。
參考：
1.css優(yōu)先級(jí)計(jì)算規(guī)則
2.CSS選擇器筆記
3.Selectors MDN
4.CSS3 選擇器——基本選擇器
5.CSS3 選擇器——偽類選擇器
6.征服高級(jí)CSS選擇器
