CSS選擇器優先

Question

我有以下HTML：

<ul class="menu"> 
    <li>One</li> 
    <li class="two">Two</li> 
    <li>Three</li> 
</ul> 

和下面的CSS：

.menu > li { 
    color: red; 
} 

.two { 
    color: green; 
} 

但所有列表項具有紅色。如果我把它改成這樣：用.two類

ul > li { 
    color: red; 
} 

.two { 
    color: green; 
} 

secong列表項有現在的綠色，我想。這是否有任何錯誤或爲什麼它以這種方式工作？

http://codepen.io/Chovanec/pen/iJsuC

Answer 1

你可以選擇那些的calculate the specificity（這裏有一個friendlier version）：

• .menu > li具有特異性0,0,1,1（）。
• ul > li具有特異性0,0,0,2（）。
• .two具有特異性0,0,1,0（）。

粗體數字只是特定性的基數10表示。你不會總是能夠把它們寫這樣一來，作爲0,0,100,0也是一個有效的特異性和必須在基本高於100

所以回到你的問題表示：.menu > li>.two>ul > li，如類選擇比標籤名稱（類型）選擇器更具體。