作為一個Web開發者，掌握必要的前臺技術也是很重要的，特別是在遇到一些實際問題的時候。這里給大家列舉一個例子：

給一個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的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼。

選擇器的優先級別

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

<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；瀏覽器自然會顯示紅色的字。理解了這個道理之后下面的優先級計算自是易如反掌：