CSS選擇器以及優先級與比對原理

最常用的五類css選擇器

準确而簡潔的運用css選擇器會達到非常好的效果。我們不必通篇給每一個元素定義類（class）或id，通過合适的組織，可以用最簡單的方法實作同樣的效果。在實際工作中，最常用的選擇器有以下五類：

一、标簽選擇器：

顧名思議，标簽選擇器是直接将html标簽作為css選擇器，可以是p、h1、dl、strong等html标簽。如：

二、id選擇器：

我們通常給頁面元素定義id。例如定義一個層＜divid="menubar">＜/div>然後在樣式表裡這樣定義：

其中"menubar"是你自己定義的id名稱。注意在前面加"#"号。

id選擇器也同樣支援後代選擇器，例如：#menubarp{text-align:center;line-height:20px;;}這個方法主要用來定義層和那些比較複雜，有多個“唯一後代”的元素。

三、類（class）選擇器：

在css裡用一個點開頭表示類别選擇器定義，例如：

在頁面中，用class="類别名"的方法調用：＜spanclass="da1">14px大小的字型＜/span>這個方法比較簡單靈活，可以随時根據頁面需要建立和删除。但需要避免多class綜合症。

四、群組選擇器：

當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗号分隔，這就是css選擇器中的群組選擇器。如：

使用組群選擇器，将會大大的減化css代碼，将具有多個相同屬性的元素，合并群組進行選擇，定義同樣的css屬性，這大大的提高了編碼效率與css檔案體積。

五、後代選擇器：

css選擇器中的後代選擇器也叫派生選擇器。可以使用後代選擇器給一個元素裡的子元素定義樣式，例如這樣：

第一段，就是給li下面的子元素strong定義一個斜體加粗而且套紅的樣式。其他以此類推。

後代選擇器的使用是非常有益的，如果父元素内包括的html元素具有唯一性，則不必給内部元素再指定class或id，直接應用此選擇器即可，例如下面的h3與ul就不必指定class或id。

在這裡css就可以及樣寫：

結合使用上面的四種css選擇器，基本滿足了css布局的需要，主要在于靈活的使用，特别是後代選擇器的使用能大大的簡化html文檔，使html做到結構化明确，最小的代碼實作同樣的效果。

 優先級與比對原理

給一個p标簽增加一個類（class），可是執行後該class中的有些屬性并沒有起作用。通過firebug檢視，發現沒有起作用的屬性被覆寫了。這個時候突然意識到了css選擇器的優先級問題，這裡就css選擇器的優先級問題做了一些總結。

選擇器種類

嚴格來講，選擇器的種類可以分為三種：标簽名選擇器、類選擇器和id選擇器。而所謂的後代選擇器和群組選擇器隻不過是對前三種選擇器的擴充應用。而在标簽内寫入style=""的方式，應該是css的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。而一般人們将上面這幾種方式結合在一起，是以就有了5種或6種選擇器了。

三種基本的選擇器類型

文法如下：

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

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

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

注意，id選擇器跟類選擇器有很大的不同：一個頁面内不能出現相同的id；再就是id也是背景開發人員會經常用的，是以前端開發人員應該盡量少的使用。當然跟背景人員的工作配合十分娴熟之後，這些都不會成為限制。

擴充選擇器

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

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

選擇器的優先級别

了解了各種選擇器後，還有一個重要的知識點就是css選擇器的優先級。這也就是為什麼polaris會遇到文章開頭的問題。舉個簡單的例子：

如果已經把.polaris下面span内的字型設定成紅色：

這時，如果要改變.beijixing的顔色為藍色，用下面的指令是不能實作的：

出現這種情況就是因為後一個指令的優先級不夠，兩條互相沖突的樣式設定，浏覽器隻會執行優先級較高的那個。

那麼選擇器的優先級是怎麼規定的呢？

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

對于什麼情況下使用什麼選擇器，用不同選擇器的原則是：第一：準确的選到要控制的标簽；第二：使用最合理優先級的選擇器；第三：html和css代碼盡量簡潔美觀。通常：

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

2、li、td、dd等經常大量連續出現，并且樣式相同或者相類似的标簽，我們采用類選擇器跟标簽名選擇器結合的後代選擇器 .xx li/td/dd {} 的方式選擇。

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

在這裡不得不提使用在标簽内引入css的方式來寫css，即：

這時候的優先級是最高的。我們給它的優先級是1000，這種寫法不推薦使用，特别是對新手來說。這也完全違背了内容和顯示分離的思想。div+css的優點也不能再有任何展現。

後代選擇器的定位原則

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

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

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

如果按從左到右查找，哪會先查找到很多不相關的p和span元素。而如果按從左到右的方式進行查找，則首先就查找到<span class='red'>的元素。firefox稱這種查找方式為key selector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的key就是span.red。

簡潔、高效的css

所謂高效的css就是讓浏覽器在查找style比對的元素的時候盡量進行少的查找，下面列出一些我們常見的寫css犯一些低效錯誤：

◆不要在id選擇器前使用标簽名

一般寫法：div#divbox

更好寫法：#divbox

解釋： 因為id選擇器是唯一的，加上div反而增加不必要的比對。

◆不要再class選擇器前使用标簽名

一般寫法：span.red

更好寫法：.red

解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：

如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫

◆盡量少使用層級關系

◆使用class代替層級關系

 id選擇器的使用技巧

id用于辨別頁面唯一進制素，id的名稱是控制某一内容塊的手段，通過将某内容塊置入div并賦予唯一的id，就可以用css選擇器來精确定義每一個頁面元素的外觀表現，包括标題、清單、圖檔、連結或者段落等等。例如你為#header寫一個css規則，就可以完全不同于#content裡的圖檔規則。

可以通過不同規則來定義不同内容塊裡的連結樣式。類似這樣：#nav a:link或者 #main a:link或者#footer a:link。也可以定義不同内容塊中相同元素的樣式不一樣。例如，通過#main p和#sider p分别定義#main p和#sider p的樣式。從結構上講，你的頁面是由圖檔、連結、清單、段落等組成的，這些元素本身并不會對顯示在什麼網絡 裝置中（pda還是手機或者網絡電視）有影響，它們可以被定義為任何的表現外觀。

一個仔細結構化的html頁面非常簡單，每一個元素都被用于結構目的。當你想縮進一個段落，不需要使用blockquote标簽，隻要使用p标簽，并對p 加一個css的text-indent規則就可以實作縮進目的。p是結構化标簽，text-indent是表現屬性，前者屬于html，後者屬于css。（這就是傳說中的結構與表現相分離）

良好結構的html頁面内幾乎沒有表現屬性的标簽。代碼非常幹淨簡潔。例如，原先的代碼，現在可以隻在html中寫，所有控制表現的東西都寫到css中去，在結構化的html中， table就是表格，而不是其他什麼（更不能被用來布局和定位）。

當然，css選擇器不隻是這麼簡單，除了id還有class還有後代選擇器，屬性選擇器等等。