发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？
CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则：
- 元素的 style 样式属性，加 1,0,0,0。
- 每个 ID 选择符（#id），加 0,1,0,0。
- 每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
- 每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
- 其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。
最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。
除了 Specificity 还有一些其他规则：
- !important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
- 如果优先权一样，则按源码中“后来者居上”的原则。
- 由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。
范例分析：
h1 {color: red;}
/* 只有一个普通元素加成，结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成，结果是 0,0,0,2 */
/*0,0,0,1 小于 0,0,0,2 ，后者胜出*/
h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/
h2 {color: silver;}
/*一个普通元素，结果是 0,0,0,1 */
/*0,0,1,1 大于 0,0,0,1 ，前者胜出*/
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符（子选择符 >），结果是0,0,1,7 */
li#answer {color: navy;}
/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */
/*0,0,1,7 小于 0,1,0,1，后者胜出*/节选 old9 的《CSS的优先权》（无法穿越 GFW）
：
witter：
共有36 条评论
沙发。
@Macji 你还真够神速的–！
怿飞的这篇文章很受用，谢谢
嗯 这个说明很简洁 -v-. 不像有的地方讲样式得分计算啰嗦了一堆还没说清楚。。。
呃。。。。那个通过js分配的css规则是相当于元素内联的css规则吧？
CSS2.1 的优先权图示…
怿飞的新写的 Blog 《详解 CSS 的优先权》非常的精彩。对于我这样的 CSS 菜鸟来说，真的可以用醍醐灌顶来形容。
个人认为 CSS 优先权是比较重要的概念，尤其在维护庞大的 CSS 样式时，就显…
不错的文章 值得学习学习
很好很细致！
css 如果不起作用了，这个就起作用了
不错的,值得学习以下
刚今天打算整理一下这个东西,结果就出现了.
记得以前有在小志的博客里看到有关优先级的文章,当时不明白优先是怎么来的,通过此文现在有进一步的了解了!感谢!
呵呵，这篇CSS文档还是有点做用的,解决了以前的一些困扰
不错，学习了
详解CSS的优先权 _ PlanABC – 怿飞’s Blog…
发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？
CSS2.1 中规定了关于 CSS…
YES!B/S!文章示例页面
.test_class{
color:red;
}
body div div div div div div div div div div div div div div div{
color:green;
}
告诉我颜色
告诉我谁胜出？ 呵呵～～ 这个算法只是供参考的。
书上看过哈哈 这个很有用的
@匿名 算法没有错，但或许有朋友理解不透彻，他们相比的是对应的位，此并不为10进制的4位数。
恩…记得原来在坛子里讨论过~~~
重温一下 ^^
现在换用遨游玩玩…
不过还要一个一个的从新订阅RSS…
不知道怎么从IE7中移过来…
囧rz…
CSS权威指南上面有的吧，嘿嘿！
确实很实用。。也很受用！3Q
@怿飞 你不应用“位”，用“组”，这样他们容易理解正确
厉害的
[...] CSS优先级的知识大家应该都比较了解了（如果不了解可以参看《详解CSS的优先权》）。但是，注意哦，这只是W3C的CSS2.1规范里规定的。所以，事实上在那个“非标准浏览器”里，会出一些问题。 [...]
怎么不显示我的评论
#mainContent a:link
.bus_tab li a:link
请问一下这两个是哪个优先权高。
[...] 详解CSS的优先权 | 怿飞 [...]
[...] 详解CSS的优先权 | 怿飞 [...]
[...] 详解CSS的优先权 | 怿飞 [...]
[...] 详解CSS的优先权 | 怿飞 [...]
[...] 详解CSS的优先权 | 怿飞 [...]
[...] 详解CSS的优先权 | 怿飞 [...]
[...] 详解CSS的优先权 | 怿飞 [...]
[...] 详解CSS的优先权 | 怿飞 发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？ CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。 [...]
[...] 详解CSS的优先权 | 怿飞 [...]
[...] 详解CSS的优先权 | 怿飞 [...]