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

Question

我有以下HTML。

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

在我的CSS样式表中，我有一个标签的常规设置，以及稍后的几个线条设置为ul li a。 像这样：

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

Firebug告诉我，首先是颜色：蓝色加载，然后用颜色覆盖：红色
到目前为止，我一直认为，加载css文件的顺序和单个css文件中的样式顺序告诉浏览器应该如何格式化html元素。不幸的是，我现在正在体验它，反之亦然。

那么请告诉我，我如何纠正我的风格，以使li内的标签呈现蓝色而不是红色？

Answer 1

根据哪些样式对元素具有最多特定来应用样式，然后按照文本顺序应用具有相同特异性的规则。更多in the spec。由于a:link比ul li a更具有特定，因此无论展示位置如何，该样式都会获胜。

  

那么请告诉我，我如何纠正我的风格，以使li内的标签呈现蓝色而不是红色？

使蓝色规则至少与红色规则一样具体。在这种情况下，您可以通过向其添加:link来执行此操作：

ul li a:link
{
  color:blue;
}

Answer 2

这是一篇关于CSS选择器特异性的文章看起来不错：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

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

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：链接样式获胜。

提示：订单（在CSS文件中）仅在两个css选择器具有相同特异性时才有意义。

Answer 3

我会使用color:blue !important;