应用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

根据哪些样式最特定于元素应用样式,然后按照文本顺序应用具有相同特异性的规则.更多此处的规格.因为a:link是更具体的比ul li a,这种风格赢得不管安置.

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

使蓝色规则至少与红色规则一样具体.在这种情况下,您可以通过添加:link它来实现:

ul li a:link
{
  color:blue;
}

Answer 2

这是一篇关于CSS Selector特性的文章看起来不错: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选择器具有相同特异性时才有意义.