CSS权重（优先级）

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

Media type and element match
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

Specificity
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，这个留心的朋友可能会注意到。

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

原创文章转载请注明：YSlove.net

本文固定链接:http://yslove.net/2009/07/css-specificity/