CSS選擇器是用于定位文檔中的元素所在以便設(shè)定相應(yīng)的樣式蝗罗，常見的選擇器包括：基礎(chǔ)選擇器、組合選擇器蝌戒、屬性選擇器串塑、偽類選擇器和偽元素等。
而優(yōu)先級(jí)則是CSS樣式在瀏覽器中被解析的先后順序
1.CSS選擇器
- 什么是選擇器
CSS選擇器是用于定位文檔中的元素所在以便設(shè)定相應(yīng)的樣式的代碼 - 選擇器的意義
在對(duì)文檔設(shè)計(jì)樣式時(shí)進(jìn)行精準(zhǔn)地定位 - 選擇器的分類
選擇器的類型可大致劃分為：基礎(chǔ)選擇器北苟、組合選擇器桩匪、屬性選擇器、偽類選擇器和偽元素等- 基礎(chǔ)選擇器
| 選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| * | 通用選擇器友鼻，匹配任何元素 | *{font-size:16px;} |
| E | 標(biāo)簽選擇器傻昙，匹配所有使用E標(biāo)簽的元素 | p{font-family:arial;} |
| .error | class選擇器，匹配所有class屬性中包含error的元素 | .error{font-weight:bold;} |
| #correct | id選擇器彩扔，匹配所有id屬性值為correct的元素 | #correct{font-style:italic;} |
- 組合選擇器
| 選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| E,F | 多元素選擇器妆档，同時(shí)匹配所有E元素或F元素 | div,p{background-attachment:fixed;} |
| E F | 后代元素選擇器，匹配所有屬于E元素的后代F元素 | div a{background-color:blue;} |
| E > F | 子元素選擇器虫碉，匹配所有E元素的子元素F | div>p{background-image:url(xxx.gif)} |
| E+F | 毗鄰元素選擇器贾惦，匹配所有緊隨E元素之后的同級(jí)元素F | p+div{background-position:x% y%} |
- 屬性選擇器
| 選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| E[att] | 匹配所有具有att屬性的E元素 | p[style]{background-repeat:repeat-y;} |
| E[att=val] | 匹配所有att屬性等于“val”的E元素 | div[class="c1"] |
| E[att~=val] | 匹配所有att屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“val”的E元素 | div[class~=c2] |
| E[att｜=val] | 匹配所有att屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值、其中一個(gè)值以“val”開頭的E元素 | p[lang｜=en] |
【注】除了上表提到的屬性選擇器之外须板，還包括一些CSS3新添加的屬性選擇器碰镜，這些留待日后更新
- 偽類選擇器
| 選擇器 | 含義 | 實(shí)例 |
|---|---|---|
E:first-child |
匹配父元素E下的第一個(gè)子元素 | div:first-child{text-align:center;} |
| E:link | 匹配所有未被點(diǎn)擊的鏈接 | |
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 | |
| E:active | 匹配鼠標(biāo)已經(jīng)按下、還沒有釋放的E元素 | |
| E:hover | 匹配鼠標(biāo)懸停其上的E元素 | |
| E:focus | 匹配獲得當(dāng)前焦點(diǎn)的E元素 | |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
- 偽元素
| 選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| E:first-line | 匹配E元素的第一行 | p:first-line{color:red;} |
| E:first-letter | 匹配E元素的第一個(gè)字母 | .c1:first-letter{color:blue;} |
| E:before | 在E元素之前插入生成的內(nèi)容 | .ctn before{content:"";display:block;;height:40px;width:40px;} |
| E:after | 在E元素之后插入生成的內(nèi)容 | .ctn after{content:"";display:block;;height:40px;width:40px;} |
2.CSS的優(yōu)先級(jí)
【注】
本篇幅的知識(shí)點(diǎn)是根據(jù)網(wǎng)站的資料整合而成习瑰，是國(guó)內(nèi)開發(fā)者關(guān)于CSS選擇器優(yōu)先級(jí)的一般看法绪颖，特點(diǎn)是計(jì)算簡(jiǎn)便，但存在一定的缺陷性甜奄。
這里柠横，非常感謝饑人谷的夏東旭童鞋在閱覽筆者的文章后，給予我關(guān)于CSS選擇器的優(yōu)先級(jí)的指正贺嫂，夏東旭童鞋的文章更加具有參考價(jià)值滓鸠，在此附上其文章地址
至于兩種計(jì)算方式的計(jì)算優(yōu)劣以及適用情況，由于筆者還算新手第喳，視野未開，容日后對(duì)本文做進(jìn)一步完善踱稍。
css優(yōu)先級(jí)曲饱，即是指CSS樣式在瀏覽器中被解析的先后順序
- 選擇器優(yōu)先級(jí)的規(guī)定
關(guān)于優(yōu)先級(jí)的規(guī)定，常用的方法是給不同的選擇器分配權(quán)值：- id選擇器優(yōu)先級(jí)很高珠月，權(quán)值為100
- class扩淀、屬性和偽類選擇器的權(quán)值為10
- 標(biāo)簽選擇器權(quán)值為1
在比較樣式的優(yōu)先級(jí)時(shí)，只需統(tǒng)計(jì)選擇符中的id啤挎、class和標(biāo)簽名的個(gè)數(shù)驻谆，然后把相應(yīng)的權(quán)值相加即可，最后根據(jù)結(jié)果排出優(yōu)先級(jí) - 權(quán)值較大的優(yōu)先級(jí)越高
- 權(quán)值相同的庆聘，后定義的優(yōu)先級(jí)較高
- 樣式值含有胜臊！important，優(yōu)先級(jí)最高
div .class1 #people的權(quán)值等于1+10+100=111
.class2 li #age的權(quán)值等于10+1+100=111
如果第二個(gè)選擇器后定義樣式伙判，則第二個(gè)的優(yōu)先級(jí)要高
- 后代選擇器的定位原則
在這里介紹一下對(duì)于后代選擇器象对，瀏覽器是如何查找元素的呢？
瀏覽器CSS匹配不是從左到右進(jìn)行查找宴抚，而是從右到左進(jìn)行查找勒魔。
比如DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素菇曲，找到后冠绢，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素常潮，如果都存在則匹配上弟胀。
瀏覽器從右到左進(jìn)行查找的好處是為了盡早過(guò)濾掉一些無(wú)關(guān)的樣式規(guī)則和元素。
參考資料
