a:link/a:visited 为什么优先级比class高?

 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a、b、c三个标记来计算,

其中:

  1. ID选择器「如:#header」的个数(=a)
  2. Class选择器「如:.foo」、属性选择器「如:[class]」、伪类「如::link」的个数(=b)
  3. 标签选择器「如:h1」、伪元素「如::after」的个数(=c)
  4. 忽略「*」选择器
  5. 虽然伪类(如:hover)参与CSS优先级的计算,但是「:not」不参与计算。
  6. HTML style 属性内的优先级在CSS2.1中有描述(实际在浏览器的实现中它不直接参与优先级的计算)
    Assigning property values, Cascading, and Inheritance

只要一个选择器的 a>0,b=0,即使另外一个选择的a=0, b=161,那么前者的权重依然更大。
例1:

a:link{ color: red;    /* 优先级:a=0,b=1,c=1 */}
.test{  color: yellow; /* 优先级:a=0,b=1,c=0 */}


他们的权重(优先级)b是相等的,但是c标记中,前者大于后者,所以最终「a:link」生效显示为红色。

例2:

div[class].main a{ color:red; /* 优先级:a=0,b=2,c=2 */}
body div a[href]{ color:blue; /* 优先级:a=0,b=1,c=3 */}

由于属性选择器和class选择器都计算在b标记中,所以前者b=2>后者b=1,最终显示为红色。

切记,不要把权重简单的作为10进制数字比较其大小。

posted @ 2015-10-06 12:36  Midaoi  阅读(300)  评论(0编辑  收藏  举报