CSS权重（优先级）
星期二, 七月 28th, 2009, 17:45 | YSjia 点击3352次对于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框架起到关键性的作用。
如果你喜欢请+1
Tags: css, CSS权重, IE !important, Specificity
伪类的权重貌似是10吧…
[回复]
恩，伪类的权重应该是10，但是伪元素的权重应该是1。
参考：http://www.w3.org/TR/CSS21/cascade.html#specificity
伪类与伪元素：http://www.wangchao.net.cn/bbsdetail_1847246.html
[回复]
我发觉，是我错了，学习了…
[回复]
关于那个!important,IE确实不支持…之所以会显示蓝色，那是因为IE6对!important不支持，所以忽略了…如果觉得我说的不对，可以发email哦…
[回复]
这个问题真的很让人迷惑。:)
[回复]
没太在意过CSS的权重，在定义的时候如果样式要发生改变，就会再写一个相应的样式。
[回复]
平时只注意行内最高，什么id>class>标记，important也有所了解，但不深入，够用就行。不过像jiajia这样做设计的，真是令人敬仰啊。
p.s.我的博客开始恢复写作了，地址是http://blog.xystudio.info。没事可以去坐坐啊。呵呵
[回复]
CSS看似简单，但是细细琢磨还是挺有内涵的，呵呵。终于又回到大家庭中了~
[回复]
太细节的东西我还真没有太在意呢
[回复]
不懂,纯路过…
[回复]
问下：安装wp thread comment之后评论的内容会被机器先抓取到（也就是文章排在评论后面），如果取消插件就不会有这个问题。和css有关吗？
[回复]
文章在评论后面？有时间去你那看看~
[回复]
到现在都还没搞清楚CSS，哎`~
[回复]
通常不用太在意这个权重，应该注意属性的继承和样式的兼容性
[回复]
CSS的继承性一部分就是来自权重的。呵呵
[回复]
SyntaxHighlighter这个东西经常碰到解析xml错误的情况，不知道博主有没遇到过
[回复]
这个插件解析XML时必须将
<全部都替换成<才可以，不然会出现在阻断。不知道你说的是不是这种情况。[回复]
应该是的,基本都出现在循环的地方,<会不成对出现,
[回复]
很多都不知道呢
问个问题嘛
既然要显示red为什么不直接写red，还要加个blue再去!important red啊？
[回复]
在比较复杂的情况经常用到，比如我现在用的SyntaxHighlighter这个插件的自定义皮肤，在不改变原来庞大的CoreCSS的情况下达到特定的效果。
[回复]
这个肯定是高阶的css技巧，我学了再来领悟
[回复]
这个，没怎么关注过……我没认真去学css，只是用了就扔……
[回复]