CSS 样式的应用顺序是什么？答案

【问题标题】：In which order are CSS styles applied?CSS 样式的应用顺序是什么？
【发布时间】：2010-05-13 11:34:37
【问题描述】：

我有以下 HTML。

<ul>
  <li>
    <a>asdas</a>
  </li>
</ul>

在我的 CSS 样式表中，我有 a 标签的常规设置，以及 ul li a 的数百行设置。像这样：

a:link
{
 color: red;
}
...
ul li a
{
 color:blue;
}

Firebug 告诉我，首先加载 color:blue，然后被 color:red 覆盖
到目前为止，我一直认为，加载 css 文件的顺序和单个 css 文件中的样式顺序告诉浏览器应该如何格式化 html 元素。不幸的是，我现在反之亦然。

那么告诉我，我必须如何纠正我的样式以实现 li 内的 a 标签呈现蓝色而不是红色？

【问题讨论】：

标签： html css

【解决方案1】：

样式是根据最特定元素的样式应用的，然后以文本顺序应用具有相同特性的规则。更多在这里in the spec。因为a:link 比ul li a 更具体，所以无论位置如何，这种风格都会胜出。

那么告诉我，我必须如何纠正我的样式以实现 li 内的 a 标签呈现蓝色而不是红色？

使蓝色规则至少与红色规则一样具体。在这种情况下，您可以通过添加 :link 来做到这一点：

ul li a:link
{
  color:blue;
}

【讨论】：

【解决方案2】：

如何衡量特异性？部分为您提供答案：

a:link   => one tag (a) + one pseudo-class (:link) = 1 + 10    = 11 points
ul li a: => three tags (ul, li, a)                 = 1 + 1 + 1 =  3 points

所以 a:link 风格胜出。

提示：顺序（在 CSS 文件中）仅在两个 CSS 选择器具有相同特异性时才重要。

【讨论】：

【解决方案3】：

我会使用color:blue !important;

【讨论】：

这有两个问题。首先，您的语法错误（爆炸出现在重要一词之前）。第二，是大锤的方法，没有回头路。如果您想将第三种样式放入级联中，那么 !important 也会将其击倒。
@David Dorward 谢谢，我更正了。我只是在回答他的问题So tell me, how must I correct my style to achieve the a tag inside the li to be rendered blue and not red? 我不是吗，他现在没有说任何关于第三种风格的事情吗：D 我同意它非常丑陋，但它回答了他的问题
投反对票的人可以告诉我为什么投反对票，我修复了语法错误，还有什么我必须修复/解释/或不修复