8.26日音訊,網(wǎng)頁制作之選擇器優(yōu)先級的實際運用。嚴格來講，選擇器的種類可以分為三種：標簽名選擇器、類選擇器和ID選擇器。而所謂的后代選擇器和群組選擇器只不過是對前三種選擇器的擴展應用。而在標簽內(nèi)寫入style=""的方式，應該是CSS的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。

 

　　給一個p標簽增加一個類（class），可是執(zhí)行后該class中的有些屬性并沒有起作用。通過Firebug查看，發(fā)現(xiàn)沒有起作用的屬性被覆蓋了。這個時候突然意識到了CSS選擇器的優(yōu)先級問題，這里就CSS選擇器的優(yōu)先級問題做了一些總結(jié)。

　　選擇器種類

　　嚴格來講，選擇器的種類可以分為三種：標簽名選擇器、類選擇器和ID選擇器。而所謂的后代選擇器和群組選擇器只不過是對前三種選擇器的擴展應用。而在標簽內(nèi)寫入style=""的方式，應該是CSS的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。而一般人們將上面這幾種方式結(jié)合在一起，所以就有了5種或6種選擇器了。

　　三種基本的選擇器類型

　　語法如下：

　　◆標簽名選擇器，如：p{}，即直接使用HTML標簽作為選擇器。

　　◆類選擇器，如.polaris{}。

　　◆ID選擇器，如#polaris{}。

　　注意，ID選擇器跟類選擇器有很大的不同：一個頁面內(nèi)不能出現(xiàn)相同的ID；再就是ID也是后臺開發(fā)人員會經(jīng)常用的，所以前端開發(fā)人員應該盡量少的使用。當然跟后臺人員的工作配合十分嫻熟之后，這些都不會成為限制。

　　擴展選擇器

　　◆后代選擇器，如.polarisspanimg{}，后代選賊器實際上是使用多個選擇器加上中間的空格來找到具體的要控制標簽。

　　◆群組選擇器，如p,span,img{}，群組選擇器實際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼。

　　選擇器的優(yōu)先級別

　　了解了各種選擇器后，還有一個重要的知識點就是CSS選擇器的優(yōu)先級。這也就是為什么polaris會遇到文章開頭的問題。邯鄲網(wǎng)站建設(shè)來給大家舉個簡單的例子：

　　beijixingpolaris

如果已經(jīng)把.polaris下面span內(nèi)的字體設(shè)置成紅色：

　　.polarisspan{color:red;}這時，如果要改變.beijixing的顏色為藍色，用下面的命令是不能實現(xiàn)的：

　　.beijixing{color:blue;}出現(xiàn)這種情況就是因為后一個命令的優(yōu)先級不夠，兩條相互沖突的樣式設(shè)置，瀏覽器只會執(zhí)行優(yōu)先級較高的那個。

　　那么選擇器的優(yōu)先級是怎么規(guī)定的呢？

　　一般而言，選擇器越特殊，它的優(yōu)先級越高。也就是選擇器指向的越準確，它的優(yōu)先級就越高。通常我們用1表示標簽名選擇器的優(yōu)先級，用10表示類選擇器的優(yōu)先級，用100標示ID選擇器的優(yōu)先級。比如上例當中.polarisspan{color:red;}的選擇器優(yōu)先級是10+1也就是11；而.polaris的優(yōu)先級是10；瀏覽器自然會顯示紅色的字。理解了這個道理之后下面的優(yōu)先級計算自是易如反掌：

　　p.test1.spanvar優(yōu)先級1+10+10+1span#xxx.songsli優(yōu)先級1+100+10+1#xxxli優(yōu)先級100+1對于什么情況下使用什么選擇器，用不同選擇器的原則是：第一：準確的選到要控制的標簽；第二：使用最合理優(yōu)先級的選擇器；第三：HTML和CSS代碼盡量簡潔美觀。通常：

　　1、最常用的選擇器是類選擇器。

　　2、li、td、dd等經(jīng)常大量連續(xù)出現(xiàn)，并且樣式相同或者相類似的標簽，我們采用類選擇器跟標簽名選擇器結(jié)合的后代選擇器.xxli/td/dd{}的方式選擇。

　　3、極少的情況下會用ID選擇器，當然很多前端開發(fā)人員喜歡header，footer，banner，conntent設(shè)置成ID選擇器的，因為相同的樣式在一個頁面里不可能有第二次。

　　在這里不得不提使用在標簽內(nèi)引入CSS的方式來寫CSS，即：

　　polaris

這時候的優(yōu)先級是最高的。我們給它的優(yōu)先級是1000，這種寫法不推薦使用，特別是對新手來說。這也完全違背了內(nèi)容和顯示分離的思想。DIV+CSS的優(yōu)點也不能再有任何體現(xiàn)。

　　后代選擇器的定位原則

　　在這里介紹一下對于后代選擇器，瀏覽器是如何查找元素的呢？

　　瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如DIV#pBoxpspan.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為pBox的p元素，如果都存在則匹配上。

　　瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。比如如下html和css: