执行顺序

Question

我有一个相当大的页面，其中包含大量的css和html。该页面按地区划分。在某处设置每个区域的基础（例如文本颜色，链接颜色等）。

这是在CSS文件的开头完成的。但是，您可以选择自定义区域内的模块外观。所以考虑一下我在侧边栏上有一个.right-zone类的事实。我在那里放了一个.navigation模块。一旦我定制了.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.stackoverflow.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

这也与所谓的CSS特异性有关（正如Frankie所说的那样）。见CSS-Tricks on Specificity

基本上：

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

会使它更“具体”，因此会覆盖其他风格。还要注意，是的，具有相同特异性的最后一个定义将获胜。

Answer 3

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

// 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; }

希望它有所帮助！