|
|
发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？
CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用
发现很多朋友对 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 的计算，低于一切其他规则（例 全局选择符 * ）。
范例分析：
节选 old9 的《CSS的优先权》（无法穿越 GFW）
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，后者胜出*/ |
|
发表于 2008-10-17 19:23:28
