範圍背景顏色樣式未設置爲工作

#div1 span{ 
    background-color:green; 
} 
.a{ 
    background-color:red; 
} 
<div id="div1"> 
    <span>span1</span> 
    <span class="a">span2</span> 
</div>

爲什麼span2背景顏色未設置爲紅色？它仍然是綠色！發生了什麼？範圍背景顏色樣式未設置爲工作

來源

2014-10-19 Keivan Sabil...

發表您的HTML請 – Haris 2014-10-19 09:36:21

這裏是代碼：http://jsfiddle.net/6gLvwzod/ – 2014-10-19 09:38:40

你需要!important

#div1 span{ 
    background-color:green; 
} 
.a{ 
    background-color:red !important; 
}

覆蓋原有的CSS，這將修復它

來源

2014-10-19 09:46:55 Parody

雖然它會解決它，但這不是最佳實踐，尤其是在這種情況下，重要的是與其他規則相比具有最高的特異性，並且幾乎不可覆蓋。這就像給出一個999999的元素z索引，而不是隻指定10或任何你需要的。 – 2014-10-19 09:51:43

它的發生是因爲評分系統，這是由CSS引擎用來找出哪些規則具有最高的優先級，因此應該應用。它被稱爲特異性。如果您想了解更多關於該主題，請訪問以下資源：

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

在你的情況＃DIV1跨度（1個id選擇+ 1標籤選擇器）獲取更高的優先級，然後.a（1類選擇器）。這就是爲什麼在你的例子中綠色覆蓋紅色的原因。

嘗試＃div1 .a {}而不是.a以實現期望的結果。

來源

2014-10-19 09:40:40

謝謝！解決... – 2014-10-19 09:44:36

範圍背景顏色樣式未設置爲工作

回答

相關問題