1. 首页
  2. 问答
  3. 通过简单的CSS继承难倒

通过简单的CSS继承难倒

2012-02-08 71 views
0

我有什么似乎是一个很常见的CSS继承的情况，但我不明白为什么它不工作，我以为它会。通过简单的CSS继承难倒

这里是继承的样子，从Chrome Web调试

Inherit

看到，所以我期望我的“.homeBox P”的风格将会覆盖‘#mainContent p’的风格。可是...

Cancelled Style

的#mainContent P类覆盖.homeBox页。是什么赋予了？

来源

2012-02-08 Jon

+2

这是正确的行为'#mainContent p'比'.homeBox p'更具体，因此覆盖不太具体一。 – Bazzz 2012-02-08 15:05:27

+1

值得一读：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ – 2012-02-08 15:05:56

回答

2

ID样式覆盖类样式。

为了一致，我尽量避免使用ID的样式在可能的情况。

它也避免使用这些当你开始使用服务器端脚本，可有时重新渲染的ID（如ASP.NET确实为例）时非常有用。

来源

2012-02-08 15:07:47 Curt

+0

这样的我从来不知道一个简单的事情。谢谢！ – Jon 2012-02-08 20:35:30

1

顺序首先通过特异性确定，并且一个ID比类更具体。

来源

2012-02-08 15:05:41 Supr

1

这是因为#mainContent拥有比你的其他选择更为具体：它确定是该元素的最具体的描述，上面的类选择。

的选择显性的规则是相当复杂的，在W3 DOC证明：​​

来源

2012-02-08 15:08:18

0

特异性，如前面提到的答案，是正确的。最简单的解决方法是不使用ID！如果你有，写你对嵌套元素的CSS，例如，当考虑到这一点：

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

来源

2012-02-08 15:13:00 Evert

相关问题

 相关问题