從效能上考慮，讓瀏覽器查詢盡量少的元素以確定我們想要定位的元素。
按顯示效果看，兩種寫法是沒有任何區別的 。但按照後面的特殊性規則來看前者的權重比後者僅多了1，可以說有些多餘。
許多人的誤區可能是層級寫得越多，瀏覽器匹配越精準，也不易漏掉公共樣式，潛意識裡認為css選擇器是從左往右解析的。但實際上css選擇器是
從右往左解析的。層級越多不但沒有起到優化作用，反而增加了**冗餘，降低了瀏覽器效能。
詳細解析文章：為什麼css選擇器是從右往左解析
每種選擇器都有乙個數字值（權重），將規則的每個選擇器的值加在一起，計算出規則的特殊性。
特殊性的計算採用乙個比較高的基數以確保特殊的選擇器（如id選擇器）不會被大量一般選擇器（如型別選擇器）所超越。[參考《精通css》p27]
特殊性分為四個等級：a,b,c,d
行內樣式:a=1
b等於id選擇器的總數
c等於類、偽類和屬性選擇器的數量
d等於型別選擇器和偽元素選擇器的數量
選擇器特殊性
權重style=""
1,0,0,0
1000
0,2,0,0
200#content .dateposted{}
0,1,1,0
110
div#content{}
0,1,0,1
101#content
0,1,0,0
100
p.comment .dateposted{}
0,0,2,1
21p.comment{}
0,0,1,1
11div p{}
0,0,0,2
2p{}
0,0,0,1
1舉兩個例子說明特殊性在實際應用中的重要程度。
原文：小tip: css後代選擇器可能的錯誤認識，
先上**。
css
.red p .green p
html-1
<div
class
="red"
><
div
class
="green"
><
p>1. 顏色是？
p>
div>
div>
<
div
class
="green"
><
div
class
="red"
><
p>2. 顏色是？
p>
div>
div>
看到這裡可能有大部分人不假思索答出第一行文字為綠色第二行是紅色。沒錯我就是這麼認為的。但拿到編輯器檢測以後發現正確答案是兩行文字全部變成了綠色。
接下來我修改html**css不變又試驗了一次。
html-2
<div
class
="green"
><
p>1. 顏色是？
p>
div>
<
div
class
="red"
><
p>2. 顏色是？
p>
div>
這一次的結果很顯然，第一行綠第二行紅。那麼是什麼原因造成這兩個截然不同的結果?無非是多了兩個重複的類嘛。
實際上，存在多個重複類名的情況下，選擇器不會自動匹配定位元素最親近的祖先元素。也就是說無論 green 和 red 類名寫在**，寫多少個都是無足輕重的。
拿例子來說。.red 和 .green 都是標籤p的祖先元素，不能錯誤地認為 .green 是第一行 p 元素的直接父級就會對其應用 .green p {} 的相應樣式。
進一步，在 .red 和 .green 同為 p 祖先元素的基礎上，兩個選擇器對於兩個p元素來說是一樣的，同樣匹配。
這種情況下就需要比較選擇器的權重了，通過上面的計算方式，兩者的權重都是11(0,0,1,1)。
這樣在權重相同的情況下後宣告的樣式覆蓋先宣告的樣式。如果將css宣告順序顛倒，結果就會全部顯示紅色。
共有五個鏈結偽類分別是 a:hover/a:focus/a:active/a:link/a:visited 。剛開始我們使用這些偽類選擇器做的最多的事就是去掉或者加上鏈結a的預設樣式下劃線。
將未訪問和已訪問的鏈結設定text-decoration:none，將滑鼠懸停和已經啟用的鏈結設定text-decoration:underline。於是我們可能會這樣寫樣式。
a:hover, a:focus, a:active a:link, a:visited
但是經過測試發現滑鼠懸停和啟用樣式並沒有起作用。這就是css規則的層疊性和特殊性引起的。
引用《精通css》中的解釋，兩個規則具有相同的特殊性（類、偽類、屬性選擇器的權重相同），後定義的規則覆蓋前面的, ：link和 ：visited樣式將覆蓋：hover和：active樣式。
所以應該將兩條規則的次序顛倒過來寫，懸停和啟用樣式才起作用。
剛開始不太懂這句話，後來查了一些資料才明白。
滑鼠懸停在鏈結上時，a:link（未訪問狀態）和a:visited（已訪問狀態）必定有乙個發生。
假定這個鏈結未被訪問過，滑鼠懸停於a鏈結時，這個a元素同時擁有a:hover和a:link兩個規則但最後只能應用乙個，應用哪乙個呢就由特殊性和層疊性來決定。
a:hover和a:link權重相同，a:link後定義，那就要應用a:link的規則，自然a:hover的樣式就無效了。
因此也就有了我們常說到的love hate原則：link--visited--hover-active。
css選擇器筆記
p.important 選擇器現在會匹配 class 屬性包含 important 的所有 p 元素我們假設 class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有乙...
CSS選擇器筆記
div 層，塊狀元素 span 包裹內容的容器 行內元素 容器 是設定css樣式的基礎。css是什麼 層疊樣式表 casading style sheets 產生的原因 新增非常多的標籤，相容性問題 css作用 是一種頁面渲染技術，表現形式 html結構，css的渲染，只要是對網頁中得元素的特徵值的...
css筆記 選擇器
1 繼承性 父元素的樣式可以被子元素所繼承 顏色 字型 2 層疊性 給乙個元素設定不同的說明，其效果會疊加。3 優先順序 給同乙個元素設定相同的的說明，效果以後者為準，也叫就近原則 css選擇器 選擇頁面上的元素 1 元素選擇器 通過元素名選擇css作用的目標 比如 2 類選擇器 選擇class等於...