CSS Cascading - 不应该再往下走一条线吗？答案

【问题标题】：CSS Cascading - shouldn't a line further down over-ride?CSS Cascading - 不应该再往下走一条线吗？
【发布时间】：2011-01-06 16:10:41
【问题描述】：

我的印象是，如果您将 CSS 中的一行代码放在样式表的下方，它应该被认为更重要，例如：

.边框{ 右边框：1px 实心#fff; }

.无边框{ 右边框：无； }

那么无边界类不应该覆盖第一类吗？项目没有发生这种情况，不明白为什么？

谢谢

【问题讨论】：

不完全确定您要做什么。是否正在尝试将 .no-border 类应用于已经具有 .border 类的元素？或者您真的是在说 .no-border 会覆盖 .border，这对于这两个名称来说是没有意义的。如果你说 .border { border-right: 1px solid black; } 然后有 .border{border-right: 5px solid blue; } 而这不起作用然后我明白你的意思了。

标签： css

【解决方案1】：

作为一个快速的经验法则，最后一条规则才是最重要的。

但是，在许多情况下并非如此。你需要阅读CSS Specificity。

相同的特异性：最新的规则才是最重要的。“如果您在外部样式表中写入了两次相同的规则，则样式表中较低的规则更接近元素要进行样式设置，它被认为更具体，因此将被应用。"

When selectors have an equal specificity value, such as

#content h1 { padding: 5px;}
#content h1 { padding: 10px;}

如果两个规则都具有特异性 0、1、0、1，则始终应用后一个规则。

不等的特异性：越具体的规则才是重要的。“选择器可以包含一个或多个参考点，这些参考点的特异性等级越高，您的规则就越具体。 "浏览器选择要显示的最具体的规则。

【讨论】：

【解决方案2】：

是的，只有当它具有相同的类名时，请尝试使用 !important 来代替

【讨论】：

【解决方案3】：

确保您遵循级联顺序规则。换句话说，您定义规则的方式可能会覆盖您定义规则的位置。

这个网站应该解释一切：

编辑：哎呀。在您的示例中，您没有用同名的类覆盖一个类。也可能是问题所在。

【讨论】：

【解决方案4】：

确实如此。

如果规则具有相同的特异性，则后面指定的规则优先。

【讨论】：