通過簡單的CSS繼承難倒

Question

我有什麼似乎是一個很常見的CSS繼承的情況，但我不明白爲什麼它不工作，我以爲它會。

這裏是繼承的樣子，從Chrome Web調試

看到，所以我期望我的「.homeBox P」的風格將會覆蓋‘#mainContent p’的風格。可是...

的#mainContent P類覆蓋.homeBox頁。是什麼賦予了？

Answer 1

ID樣式覆蓋類樣式。

爲了一致，我儘量避免使用ID的樣式在可能的情況。

它也避免使用這些當你開始使用服務器端腳本，可有時重新渲染的ID（如ASP.NET確實爲例）時非常有用。

Answer 2

順序首先通過特異性確定，並且一個ID比類更具體。

Answer 3

這是因爲#mainContent擁有比你的其他選擇更爲具體：它確定是該元素的最具體的描述，上面的類選擇。

的選擇顯性的規則是相當複雜的，在W3 DOC證明：​​

Answer 4

特異性，如前面提到的答案，是正確的。最簡單的解決方法是不使用ID！如果你有，寫你對嵌套元素的CSS，例如，當考慮到這一點：

#mainContent .homeBox p{font-size: 15px;}