polaris不是前臺開發人員，然而作爲一個Web開發者，掌握必要的前臺技術也是很重要的。說實話，polaris對前臺技術還是蠻感興趣的，只是一直沒有用心繫統的學過，所以瞭解的知識有點雜。這篇文章是polaris通過網上的一些知識結合自己的問題做的一些總結，一來當作筆記，二來希望能夠對初學者有點幫助。
今天在修改博客時，遇到了一個問題：給一個p標籤增加一個類（class），可是執行後該class中的有些屬性並沒有起作用。通過Firebug查看，發現沒有起作用的屬性被覆蓋了（呵呵，廢話，要不然不會不起作用）。這個時候突然意識到了CSS選擇器的優先級問題，之前一直沒有注意這個，用起來很隨意。這次遇到了，就將CSS選擇器與優先級稍微作一個總結。
1 選擇器種類
嚴格來講，選擇器的種類可以分爲三種：標籤名選擇器、類選擇器和ID選擇器。而所謂的後代選擇器和羣組選擇器只不過是對前三種選擇器的擴展應用。而在標籤內寫入style=""的方式，應該是CSS的一種引入方式，而不是選擇器，因爲根本就沒有用到選擇器。而一般人們將上面這幾種方式結合在一起，所以就有了5種或6種選擇器了。
1.1 三種基本的選擇器類型
語法如下：
☆標籤名選擇器，如：p{}，即直接使用HTML標籤作爲選擇器。
☆類選擇器，如.polaris{}。
☆ID選擇器，如#polaris{}。
注意，ID選擇器跟類選擇器有很大的不同：一個頁面內不能出現相同的ID；再就是ID也是後臺開發人員會經常用的，所以前端開發人員應該儘量少的使用。當然跟後臺人員的工作配合十分嫺熟之後，這些都不會成爲限制。
1.2 擴展選擇器
語法如下；
☆後代選擇器，如.polaris span img{}，後代選賊器實際上是使用多個選擇器加上中間的空格來找到具體的要控制標籤。
☆羣組選擇器，如div,span,img{}，羣組選擇器實際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼。
2 選擇器的優先級別
瞭解了各種選擇器後，還有一個重要的知識點就是CSS選擇器的優先級。這也就是爲什麼polaris會遇到文章開頭的問題。
舉個簡單的例子：
HTML文檔裏存在下面的標籤嵌套
<div class="polaris"> <span class="beijixing"> beijixing </span> <span> polaris </span> </div>
如果已經把.polaris下面span內的字體設置成紅色：
.polaris span {color:red;}
這時，如果要改變.beijixing的顏色爲藍色，用下面的命令是不能實現的：
.beijixing {color:blue;}
出現這種情況就是因爲後一個命令的優先級不夠，兩條相互衝突的樣式設置，瀏覽器只會執行優先級較高的那個。
那麼選擇器的優先級是怎麼規定的呢？
一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。通常我們用1表示標籤名選擇器的優先級，用10表示類選擇器的優先級，用100標示ID選擇器的優先級。比如上例當中 .polaris span {color:red;}的選擇器優先級是 10 + 1 也就是11；而 .polaris 的優先級是10；瀏覽器自然會顯示紅色的字。理解了這個道理之後下面的優先級計算自是易如反掌：
div.test1 .span var 優先級 1+10 +10 +1
span#xxx .songs li 優先級1+100 + 10 + 1
#xxx li 優先級 100 +1
對於什麼情況下使用什麼選擇器，用不同選擇器的原則是：第一：準確的選到要控制的標籤；第二：使用最合理優先級的選擇器；第三：HTML和CSS代碼儘量簡潔美觀。
通常：1、最常用的選擇器是類選擇器。2、li、td、dd等經常大量連續出現，並且樣式相同或者相類似的標籤，我們採用類選擇器跟標籤名選擇器結合的後代選擇器 .xx li/td/dd {} 的方式選擇。3、極少的情況下會用ID選擇器，當然很多前端開發人員喜歡header，footer，banner，conntent設置成ID選擇器的，因爲相同的樣式在一個頁面裏不可能有第二次。
在這裏不得不提使用在標籤內引入CSS的方式來寫CSS，即：
<div style="color:red">polaris</div>
這時候的優先級是最高的。我們給它的優先級是1000，這種寫法不推薦使用，特別是對新手來說。這也完全違背了內容和顯示分離的思想。DIV+CSS的優點也不能再有任何體現。
3 後代選擇器的定位原則
在這裏介紹一下對於後代選擇器，瀏覽器是如何查找元素的呢？
瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素，找到後，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id爲divBox的div元素，如果都存在則匹配上。
瀏覽器從右到左進行查找的好處是爲了儘早過濾掉一些無關的樣式規則和元素。
比如如下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>
如果按從左到右查找，哪會先查找到很多不相關的p和span元素。而如果按從左到右的方式進行查找，則首先就查找到<span class='red'>的元素。firefox稱這種查找方式爲key selector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的key就是span.red。
4 簡潔、高效的CSS
以下來自《瞭解CSS的查找匹配原理，讓CSS更簡潔、高效》。
所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候儘量進行少的查找，下面列出一些我們常見的寫CSS犯一些低效錯誤(也是我以前常常犯的錯誤，還老以爲這樣寫纔是高效的)：
4.1 不要在ID選擇器前使用標籤名
一般寫法：DIV#divBox
更好寫法：#divBox
解釋： 因爲ID選擇器是唯一的，加上div反而增加不必要的匹配。
4.2 不要再class選擇器前使用標籤名
一般寫法：span.red
更好寫法：.red
解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css文件中定義如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫
4.3 儘量少使用層級關係
一般寫法：#divBox p .red{color:red;}
更好寫法：.red{..}
4.4 使用class代替層級關係
一般寫法：#divBox ul li a{display:block;}
更好寫法：.block{display:block;}