CSS权重(优先级)

对于CSS的权重一直以来可以说都是含糊不清的,这个并不是因为大家对其理解有误,而是W3C在CSS2.0的声明来看的确很含糊,但是在CSS2.1里W3C已经对CSS的权重有了明确的规定。

  1. Media type and element match
  2. Importance and origin in ascending order of importance (confusingly):
    • user agent style sheets
    • user normal style sheets
    • author normal style sheets
    • author important style sheets
    • user important style sheets
  3. Specificity
  4. Source order

这里其实一个比较重要的就是“Specificity

什么是Specificity?

简单来讲就是一个权重的表达方式:如0,0,0,0。这种表达方法是一种纸牌游戏的表达方法。

更详细的内容请查看这里

所有的权重方法都将依靠他来计算(!important除外)。掌握其特有的特点,将是你对CSS权重理解的一个重要的基石。

我们可以把他简化一下,如下表:

1 * { } 0
2 li { } 1 (one element)
3 li:first-line { } 2 (one element, one pseudo-element)
4 ul li { } 2 (two elements)
5 ul ol+li { } 3 (three elements)
6 h1 + *[rel=up] { } 11 (one attribute, one element)
7 ul ol li.red { } 13 (one class, three elements)
8 li.red.level { } 21 (two classes, one element)
9 style=”” 1000 (one inline styling)
10 p { } 1 (one HTML selector)
11 div p { } 2 (two HTML selectors)
12 .sith 10 (one class selector)
13 div p.sith { } 12 (two HTML selectors and a class selector)
14 #sith 100 (one id selector)
15 body #darkside .sith p { } 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

在这里可以看到Style的权重最高其次是ID选择器,依次计算,将很容易算出当前的样式规则。

在相同的权重中,按顺序排列,在下面的权重高。

!improtant

但是,这里没有!important,为什么呢?

因为在W3C里规定,!important不论是在内联或是外联CSS样式表中,其级别都是最高级。所以不需要将其列入Specificity计算之中。

p{ color:red !important; } p{ color:blue; } 

结果color:red

说到这里,需要说明一下IE6的特殊情况。大家都说IE6不支持!important其实是错误的!只能说IE6对!important解释有Bug,但不是不支持。

e.g.

/*first*/
p{ color:red !important; } p{ color:blue; } 

/*second*/
p{ color:red !important; } #ys p{ color:blue; } 

/*third*/
p{ color:red !important; color:blue; }

结果只有最后一种在ie6下显示的是blue,其他都是显示red。

这说明在IE6下是可以用!important,但是选择器内的属性必需为唯一,不然IE6最以最后一个属性显示结果。

另外在IE6中还有另一个Specificity Bug就是伪类中的:hover与:visited,这个留心的朋友可能会注意到。

ie specificity bug

深入了解Specificity将对构建大型的CSS框架起到关键性的作用。

此条目发表在 css, 实验室 分类目录,贴了 , , , 标签。将固定链接加入收藏夹。