CSS是用于網頁設計可用的最強大的工具之一。使用它我們可以在幾分鐘內改變一個網站的界面，而不用改變頁面的標簽。在深入研究CSS選擇器之前，我們應該先搞懂CSS優先級是如何工作的。比如給一個p標簽增加一個類（class），可是執行后該class中的有些屬性并沒有起作用。通過Firebug查看，發現沒有起作用的屬性被覆蓋了。這個時候CSS選擇器優先級的問題了。

當我們寫CSS的時候需要注意有些選擇器在級聯(cascade)上會高于其它選擇器，我們寫在最后面的選擇器將不一定會覆蓋前面我們寫在同一個元素的樣式。那么你如何計算指定選擇器的優先級？如果你考慮到將優先級表示為用逗號隔開的四個數字就會相當簡單，比如：1, 1, 1, 1 或0, 2, 0, 1

第一個數字(a)通常就是0，除非在標簽上使用style屬性；
第二個數字(b)是該選擇器上的id的數量的總和；
第三個數字(c)是用在該選擇器上的其它屬性選擇器和偽類的總和。這里包括class (.example) 和屬性選擇器(比如 li[id=red])；
第四個數字(d)計算元素(就像table、p、div等等)和偽元素(就像:first-line等)；
通用選擇器(*)是0優先級；
如果兩個選擇器有同樣的優先級，在樣式表中后面的那個起作用。
讓我們看幾個例子，這樣或許比較容易理解些：

#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2
在下面的例子中，第一個將會起作用，因為它比第二個優先級高：

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
至少基本理解優先級是如何工作的是很重要的，但是一些工具比如Firebug，在我們審查指定元素的時候，按照選擇器的優先級列出所有的css選擇器對讓我們知道在指定元素上哪個選擇器是有效的是很有用的，讓你非常容易的看到那個選擇器作用于一個元素上了。

CSS3 選擇器分類

選擇器的語法