此背景顏色不會覆蓋其他顏色的原因？

Question

雖然它適用於！important，我寧願避免使用它..任何人都可以向我解釋爲什麼這不會覆蓋其他？

#g1 div div { 
    background: #fefefe; 
} 

#winnar { 
    background: #a2f5ff; 
} 

和html的

<div> 
    <div>Price</div> 
    <div id="winnar">1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
</div> 

我認爲做特異性一個在底部應該重寫一個在頂部？或者是最具特色的一個？如果是這樣，我怎樣才能讓最下面的一個覆蓋頂部？謝謝！

Answer 1

我認爲要做到特異性底部的一個應該覆蓋頂部的 ？

不，因爲第一個有一個id選擇器和兩個標記名選擇器。但第二個只有一個ID選擇器。

然後，第一個贏。

您可以在這裏找到確切的公式：http://www.w3.org/TR/CSS21/cascade.html#specificity

在一般情況下，如果你想第二條規則有更多的特異性，確保一個規則包含在其他：

#g1 div div { background: #fefefe; } 
#g1 div div#winnar { background: #a2f5ff; } 

但在這個特定的情況下更好地使用

#g1 div div { background: #fefefe; } 
#g1 #winnar { background: #a2f5ff; } 

但請注意，多個後代選擇器可能會很慢。如果可能，請嘗試使用兒童選擇器：

#g1 > div > div { background: #fefefe; } 
#g1 #winnar { background: #a2f5ff; }