被简单的CSS继承所困扰

Question

我有一个看起来很常见的CSS继承情况，但我不明白为什么它不像我想的那样工作。

以下是从Chrome网络调试器

中看到的继承效果

所以我希望我的“.homeBox p”样式会覆盖“#mainContent p”的样式。然而......

#mainContent p样式会覆盖.homeBox p。是什么给了什么？

Answer 1

ID样式覆盖类样式。

为了保持一致性，我尽量避免使用ID样式。

当您开始使用服务器端脚本时，避免使用它们也很有用，有时可以重新呈现ID（例如ASP.NET）。

Answer 2

顺序首先由特异性决定，而id比类更具体。

Answer 3

这是因为#mainContent比其他选择器具有更高的特异性：它被确定为该元素的最具体描述，并且是在类之上选择的。

选择者优势的规则相当复杂，在W3文档中进行了演示：http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 4

如前面的答案中所提到的，特异性是正确的。最简单的解决方法是不使用ID！如果必须，在为嵌套元素编写css时考虑到这一点，例如：

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