給乙個p標籤增加乙個類（class），可是執行後該class中的有些屬性並沒有起作用。通過firebug檢視，發現沒有起作用的屬性被覆蓋了。這個時候突然意識到了css選擇器的優先順序問題，這裡就css選擇器的優先順序問題做了一些總結。
51cto推薦閱讀：巧妙地使用css選擇器
選擇器種類
嚴格來講，選擇器的種類可以分為三種：標籤名選擇器、類選擇器和id選擇器。而所謂的後代選擇器和群組選擇器只不過是對前三種選擇器的擴充套件應用。而 在標籤內寫入style=""的方式，應該是css的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。而一般人們將上面這幾種方式結合在一起，所 以就有了5種或6種選擇器了。
三種基本的選擇器型別
語法如下：
◆標籤名選擇器，如：p{}，即直接使用html標籤作為選擇器。
◆類選擇器，如.polaris{}。
◆id選擇器，如#polaris{}。
注意，id選擇器跟類選擇器有很大的不同：乙個頁面內不能出現相同的id；再就是id也是後台開發人員會經常用的，所以前端開發人員應該盡量少的使用。當然跟後台人員的工作配合十分嫻熟之後，這些都不會成為限制。
擴充套件選擇器
◆後代選擇器，如.polaris span img{}，後代選賊器實際上是使用多個選擇器加上中間的空格來找到具體的要控制標籤。
◆群組選擇器，如div,span,img{}，群組選擇器實際上是對css的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多**。
選擇器的優先級別
<
divclass="polaris"
>
<
span
class="beijixing"
>
beijixing
span
>
<
span
>
polaris
span
>
div>
如果已經把.polaris下面span內的字型設定成紅色：
.polaris span
這時，如果要改變.beijixing的顏色為藍色，用下面的命令是不能實現的：
.beijixing
出現這種情況就是因為後乙個命令的優先順序不夠，兩條相互衝突的樣式設定，瀏覽器只會執行優先順序較高的那個。
那麼選擇器的優先順序是怎麼規定的呢？
一般而言，選擇器越特殊，它的優先順序越高。也就是選擇器指向的越準確，它的優先順序就越高。通常我們用1表示標籤名選擇器的優先順序，用10表示類選擇 器的優先順序，用100標示id選擇器的優先順序。比如上例當中 .polaris span 的選擇器優先順序是 10 + 1 也就是11；而 .polaris 的優先順序是10；瀏覽器自然會顯示紅色的字。理解了這個道理之後下面的優先順序計算自是易如反掌：
div.test1 .span var 優先順序 1+10 +10 +1
span#*** .songs li 優先順序1+100 + 10 + 1
#*** li 優先順序 100 +1
對於什麼情況下使用什麼選擇器，用不同選擇器的原則是：第一：準確的選到要控制的標籤；第二：使用最合理優先順序的選擇器；第三：html和css**盡量簡潔美觀。通常：
1、最常用的選擇器是類選擇器。
2、li、td、dd等經常大量連續出現，並且樣式相同或者相類似的標籤，我們採用類選擇器跟標籤名選擇器結合的後代選擇器 .xx li/td/dd {} 的方式選擇。
3、極少的情況下會用id選擇器，當然很多前端開發人員喜歡header，footer，banner，conntent設定成id選擇器的，因為相同的樣式在乙個頁面裡不可能有第二次。
在這裡不得不提使用在標籤內引入css的方式來寫css，即：
<
divstyle="color:red"
>polaris
div>
這時候的優先順序是最高的。我們給它的優先順序是1000，這種寫法不推薦使用，特別是對新手來說。這也完全違背了內容和顯示分離的思想。div+css的優點也不能再有任何體現。
後代選擇器的定位原則
在這裡介紹一下對於後代選擇器，瀏覽器是如何查詢元素的呢？
瀏覽器css匹配不是從左到右進行查詢，而是從右到左進行查詢。比如div#divbox p span.red，瀏覽器的查詢順序如下：先查詢html中所有class='red'的span元素，找到後，再查詢其父輩元 素中是否有p元素，再判斷p的父元素中是否有id為divbox的div元素，如果都存在則匹配上。
瀏覽器從右到左進行查詢的好處是為了盡早過濾掉一些無關的樣式規則和元素。比如如下html和css:
<
style
>
div#divbox p span.red
>
<
style
>
<
body
>
<
divid="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
>
如果按從左到右查詢，哪會先查找到很多不相關的p和span元素。而如果按從左到右的方式進行查詢，則首先就查詢到的元素。firefox稱這種查詢方式為key selector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的key就是span.red。
簡潔、高效的css
所謂高效的css就是讓瀏覽器在查詢style匹配的元素的時候盡量進行少的查詢，下面列出一些我們常見的寫css犯一些低效錯誤：
◆不要在id選擇器前使用標籤名
一般寫法：div#divbox
更好寫法：#divbox
解釋： 因為id選擇器是唯一的，加上div反而增加不必要的匹配。
◆不要再class選擇器前使用標籤名
一般寫法：span.red
更好寫法：.red
解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：
p.red
span.red
如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫
◆盡量少使用層級關係
一般寫法：#divbox p .red
更好寫法：.red
◆使用class代替層級關係
一般寫法：#divbox ul li a
更好寫法：.block
CSS選擇器優先順序詳解
開發者在使用css進行網頁開發時需要使用選擇器來指定樣式要應用的元素，在開發時主要有以下幾種選擇器。foo bar p 除了用css給元素加樣式，在html中也可以給元素加上行內樣式，例如 style color red i m redp 這行 在網頁中會渲染出紅色的文字。當計算優先順序時，我們可以...
詳解CSS選擇器優先順序
css在使用選擇器對元素施加屬性的時候會有先後順序,包括特殊性和重要性等概念在內,這裡我們就來詳解css中的選擇器優先順序順序,需要的朋友可以參考下 特殊性是什麼 在對乙個html元素應用css樣式時，常常有很多種方法可以找到元素，比如 css code複製內容到剪貼簿 container clas...
CSS選擇器 優先順序與匹配原理
polaris不是前台開發人員，然而作為乙個web開發者，掌握必要的前台技術也是很重要的。說實話，polaris對前台技術還是蠻感興趣的，只是一直沒有用心系統的學過，所以了解的知識有點雜。這篇文章是polaris通過網上的一些知識結合自己的問題做的一些總結，一來當作筆記，二來希望能夠對初學者有點幫助...