执行顺序

Question

我有一个相当大的页面，其中包含大量的CSS和HTML。该页面分为多个区域。某处设置了每个区域的基本信息（例如文本颜色，链接颜色等）。

这是在CSS文件的开始处完成的。但是，您可以选择自定义区域内模块的外观。所以考虑一下，我在侧栏上有一个.right-zone类。我在里面放了一个导航模块。一旦我定制了.navigation-module（通过YUI），定制的CSS就会添加到标准的CSS文件中并保存。

我期望CSS从上到下被解释。

.right-zone a { color: #ff0000; } 

是文档的基础。因此，定制后，就变成了：

.right-zone a { color: #ff0000; } 
.navigation-module a { color: #0000ff; } 

所以，想象一下文档的结构：

[...] 
<div class="right-zone"> 
    <div class="navigation-module"> 
    <a href="http://www.*.com/">foobar link</a> 
    </div> 
</div> 

我只能假设，最终颜色的链接将＃0000FF - 因为它是在最后声明CSS文件。出于某种原因，它不会在我的网站上这样做。

“通用”CSS在第335行定义 - 导航模块的定义在第409行，但链接仍然是红色而不是蓝色。

Firebug将红色显示为最终应用的样式，并且在蓝色的样式上具有透视效果。任何想法为什么发生这种情况？

Answer 1

你的例子给我一个蓝色的链接，因为它应该。我假设你真正的CSS选择器更复杂，第一个比第二个更具体。

稍后的规则只会覆盖较早的规则，如果它具有相同或更大的特异性。例如，.navigation-module a将不会覆盖较早的#right-zone a或.right-zone div a规则。

Answer 2

它是级联的。所以较低的规则优先。

// this would work as desired... 
.right-zone a { color: #ff0000; } 
.right-zone .navigation-module a { color: #0000ff; } 

可选地，您可以使用重要来覆盖优先顺序。

.right-zone a { color: #ff0000; } 
.navigation-module a { color: #0000ff !important; } 

希望它有帮助！

Answer 3

这也与所谓的CSS特异性有关（就像弗兰基曾经谈到过的那样）。见CSS-Tricks on Specificity

基本上是：

[any selector] .navigation-module a { color: #0000ff; } 

将使其更 “具体”，因此覆盖其他样式。还要注意的是，具有相同特征的最后一个定义会胜出。