詳解CSS選擇器、優(yōu)先級(jí)與匹配原理
作為一個(gè)Web開發(fā)者，掌握必要的前臺(tái)技術(shù)也是很重要的，特別是在遇到一些實(shí)際問題的時(shí)候。這里給大家列舉一個(gè)例子：
給一個(gè)p標(biāo)簽增加一個(gè)類（class），可是執(zhí)行后該class中的有些屬性并沒有起作用。通過Firebug查看，發(fā)現(xiàn)沒有起作用的屬性被覆蓋了。這個(gè)時(shí)候突然意識(shí)到了CSS選擇器的優(yōu)先級(jí)問題，這里就CSS選擇器的優(yōu)先級(jí)問題做了一些總結(jié)。
51CTO推薦閱讀：巧妙地使用CSS選擇器
選擇器種類
嚴(yán)格來講，選擇器的種類可以分為三種：標(biāo)簽名選擇器、類選擇器和ID選擇器。而所謂的后代選擇器和群組選擇器只不過是對(duì)前三種選擇器的擴(kuò)展應(yīng)用。而在標(biāo)簽內(nèi)寫入style=""的方式，應(yīng)該是CSS的一種引入方式，而不是選擇器，因?yàn)楦揪蜎]有用到選擇器。而一般人們將上面這幾種方式結(jié)合在一起，所以就有了5種或6種選擇器了。
三種基本的選擇器類型
語(yǔ)法如下：
◆標(biāo)簽名選擇器，如：p{}，即直接使用HTML標(biāo)簽作為選擇器。
◆類選擇器，如.polaris{}。
◆ID選擇器，如#polaris{}。
注意，ID選擇器跟類選擇器有很大的不同：一個(gè)頁(yè)面內(nèi)不能出現(xiàn)相同的ID；再就是ID也是后臺(tái)開發(fā)人員會(huì)經(jīng)常用的，所以前端開發(fā)人員應(yīng)該盡量少的使用。當(dāng)然跟后臺(tái)人員的工作配合十分嫻熟之后，這些都不會(huì)成為限制。
擴(kuò)展選擇器
◆后代選擇器，如.polaris span img{}，后代選賊器實(shí)際上是使用多個(gè)選擇器加上中間的空格來找到具體的要控制標(biāo)簽。
◆群組選擇器，如div,span,img{}，群組選擇器實(shí)際上是對(duì)CSS的一種簡(jiǎn)化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼。
選擇器的優(yōu)先級(jí)別
了解了各種選擇器后，還有一個(gè)重要的知識(shí)點(diǎn)就是CSS選擇器的優(yōu)先級(jí)。這也就是為什么polaris會(huì)遇到文章開頭的問題。舉個(gè)簡(jiǎn)單的例子：
- <div class="polaris">
- <span class="beijixing">
- beijixing
- </span>
- <span>
- polaris
- </span>
- </div>
如果已經(jīng)把.polaris下面span內(nèi)的字體設(shè)置成紅色：
- .polaris span {color:red;}
這時(shí)，如果要改變.beijixing的顏色為藍(lán)色，用下面的命令是不能實(shí)現(xiàn)的：
- .beijixing {color:blue;}
出現(xiàn)這種情況就是因?yàn)楹笠粋€(gè)命令的優(yōu)先級(jí)不夠，兩條相互沖突的樣式設(shè)置，瀏覽器只會(huì)執(zhí)行優(yōu)先級(jí)較高的那個(gè)。
那么選擇器的優(yōu)先級(jí)是怎么規(guī)定的呢？
一般而言，選擇器越特殊，它的優(yōu)先級(jí)越高。也就是選擇器指向的越準(zhǔn)確，它的優(yōu)先級(jí)就越高。通常我們用1表示標(biāo)簽名選擇器的優(yōu)先級(jí)，用10表示類選擇器的優(yōu)先級(jí)，用100標(biāo)示ID選擇器的優(yōu)先級(jí)。比如上例當(dāng)中 .polaris span {color:red;}的選擇器優(yōu)先級(jí)是 10 + 1 也就是11；而 .polaris 的優(yōu)先級(jí)是10；瀏覽器自然會(huì)顯示紅色的字。理解了這個(gè)道理之后下面的優(yōu)先級(jí)計(jì)算自是易如反掌：
- div.test1 .span var 優(yōu)先級(jí) 1+10 +10 +1
- span#xxx .songs li 優(yōu)先級(jí)1+100 + 10 + 1
- #xxx li 優(yōu)先級(jí) 100 +1
對(duì)于什么情況下使用什么選擇器，用不同選擇器的原則是：第一：準(zhǔn)確的選到要控制的標(biāo)簽；第二：使用最合理優(yōu)先級(jí)的選擇器；第三：HTML和CSS代碼盡量簡(jiǎn)潔美觀。通常：
1、最常用的選擇器是類選擇器。
2、li、td、dd等經(jīng)常大量連續(xù)出現(xiàn)，并且樣式相同或者相類似的標(biāo)簽，我們采用類選擇器跟標(biāo)簽名選擇器結(jié)合的后代選擇器 .xx li/td/dd {} 的方式選擇。
3、極少的情況下會(huì)用ID選擇器，當(dāng)然很多前端開發(fā)人員喜歡header，footer，banner，conntent設(shè)置成ID選擇器的，因?yàn)橄嗤臉邮皆谝粋€(gè)頁(yè)面里不可能有第二次。
在這里不得不提使用在標(biāo)簽內(nèi)引入CSS的方式來寫CSS，即：
- <div style="color:red">polaris</div>
這時(shí)候的優(yōu)先級(jí)是最高的。我們給它的優(yōu)先級(jí)是1000，這種寫法不推薦使用，特別是對(duì)新手來說。這也完全違背了內(nèi)容和顯示分離的思想。DIV+CSS的優(yōu)點(diǎn)也不能再有任何體現(xiàn)。
后代選擇器的定位原則
在這里介紹一下對(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ān)的樣式規(guī)則和元素。比如如下html和css:
- <style>
- DIV#divBox p span.red{color:red;}
- ><style>
- <body>
- <div id="divBox">
- <p><span>s1</span></p>
- <p><span>s2</span></p>
- <p><span>s3</span></p>
- <p><span class='red'>s4</span></p>
- </div>
- </body>
如果按從左到右查找，哪會(huì)先查找到很多不相關(guān)的p和span元素。而如果按從左到右的方式進(jìn)行查找，則首先就查找到<span class='red'>的元素。firefox稱這種查找方式為key selector(關(guān)鍵字查詢)，所謂的關(guān)鍵字就是樣式規(guī)則中最后(最右邊)的規(guī)則，上面的key就是span.red。
簡(jiǎn)潔、高效的CSS
所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時(shí)候盡量進(jìn)行少的查找，下面列出一些我們常見的寫CSS犯一些低效錯(cuò)誤：
◆不要在ID選擇器前使用標(biāo)簽名
一般寫法：DIV#divBox
更好寫法：#divBox
解釋： 因?yàn)镮D選擇器是唯一的，加上div反而增加不必要的匹配。
◆不要再class選擇器前使用標(biāo)簽名
一般寫法：span.red
更好寫法：.red
解釋：同第一條，但如果你定義了多個(gè).red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css文件中定義如下：
- p.red{color:red;}
- span.red{color:#ff00ff}
如果是這樣定義的就不要去掉，去掉后就會(huì)混淆，不過建議最好不要這樣寫
◆盡量少使用層級(jí)關(guān)系
一般寫法：#divBox p .red{color:red;}
更好寫法：.red{..}
◆使用class代替層級(jí)關(guān)系
一般寫法：#divBox ul li a{display:block;}
更好寫法：.block{display:block;}
原文鏈接：http://polaris1119.javaeye.com/blog/764428
【編輯推薦】
