发现很多朋友对 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)



共有46 条评论

  1. 1. 头像 MacJi

    沙发。

  2. 2. 头像 怿飞

    @Macji 你还真够神速的–!

  3. 3. 头像 手气不错

    怿飞的这篇文章很受用,谢谢

  4. 4. 头像 arthuridea

    嗯 这个说明很简洁 -v-. 不像有的地方讲样式得分计算啰嗦了一堆还没说清楚。。。

    呃。。。。那个通过js分配的css规则是相当于元素内联的css规则吧?

  5. 5. Gracecode.com

    CSS2.1 的优先权图示…

    怿飞的新写的 Blog 《详解 CSS 的优先权》非常的精彩。对于我这样的 CSS 菜鸟来说,真的可以用醍醐灌顶来形容。

    个人认为 CSS 优先权是比较重要的概念,尤其在维护庞大的 CSS 样式时,就显…

  6. 6. 头像 Оo.丫頭o.

    不错的文章 值得学习学习

  7. 7. 头像 danke

    很好很细致!

  8. 8. 头像 dyh1919

    css 如果不起作用了,这个就起作用了

  9. 9. 头像 网站推广

    不错的,值得学习以下

  10. 10. 头像 佐佐

    刚今天打算整理一下这个东西,结果就出现了.

  11. 11. 头像 纯真

    记得以前有在小志的博客里看到有关优先级的文章,当时不明白优先是怎么来的,通过此文现在有进一步的了解了!感谢!

  12. 12. 头像 搜索引擎营销

    呵呵,这篇CSS文档还是有点做用的,解决了以前的一些困扰

  13. 13. 头像 POOR

    不错,学习了

  14. 14. waakee.com

    详解CSS的优先权 _ PlanABC – 怿飞’s Blog…

    发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化?
    CSS2.1 中规定了关于 CSS…

  15. 15. 头像 匿名

    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;
    }

    告诉我颜色

    告诉我谁胜出? 呵呵~~ 这个算法只是供参考的。

  16. 16. 头像 tokki

    书上看过哈哈 这个很有用的

  17. 17. 头像 怿飞

    @匿名 算法没有错,但或许有朋友理解不透彻,他们相比的是对应的位,此并不为10进制的4位数。

  18. 18. 头像 MarVell

    恩…记得原来在坛子里讨论过~~~

    重温一下 ^^

  19. 19. 头像 MarVell

    现在换用遨游玩玩…

    不过还要一个一个的从新订阅RSS…
    不知道怎么从IE7中移过来…

    囧rz…

  20. 20. 头像 sfrost

    CSS权威指南上面有的吧,嘿嘿!

  21. 21. 头像 伊水笑

    确实很实用。。也很受用!3Q

  22. 22. 头像 fdcn

    @怿飞 你不应用“位”,用“组”,这样他们容易理解正确

  23. 23. 头像 xunleikk

    厉害的

  24. 24. 小麦的自习教室 » IE里关于CSS的优先级的bug(一)

    […] CSS优先级的知识大家应该都比较了解了(如果不了解可以参看《详解CSS的优先权》)。但是,注意哦,这只是W3C的CSS2.1规范里规定的。所以,事实上在那个“非标准浏览器”里,会出一些问题。 […]

  25. 25. 头像 如何开网店

    怎么不显示我的评论

  26. 26. 头像 亦续缘

    #mainContent a:link
    .bus_tab li a:link
    请问一下这两个是哪个优先权高。

  27. 27. 【经典】CSS技巧教程资源大全 - 奇亚 Kiya's Blog

    […] 详解CSS的优先权 | 怿飞 […]

  28. 28. 狼的一亩三分地 » 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    […] 详解CSS的优先权 | 怿飞 […]

  29. 29. 海绵网 » Blog Archive » 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    […] 详解CSS的优先权 | 怿飞 […]

  30. 30. » 60+CSS技巧教程资源大全 | 零食屋

    […] 详解CSS的优先权 | 怿飞 […]

  31. 31. 克兰印象 » 60+CSS技巧教程资源大全

    […] 详解CSS的优先权 | 怿飞 […]

  32. 32. 60+CSS技巧教程资源大全 | 帕兰映像

    […] 详解CSS的优先权 | 怿飞 […]

  33. 33. 60+xHTML+CSS技巧教程资源大全 - Jeff-Chen.Com

    […] 详解CSS的优先权 | 怿飞 […]

  34. 34. 萩迗の瞳話 » Blog Archive » 60+CSS技巧教程资源大全

    […] 详解CSS的优先权 | 怿飞 发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化? CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。 […]

  35. 35. 行骏-IT Player » Blog Archive » CSS技巧教程资源大全

    […] 详解CSS的优先权 | 怿飞 […]

  36. 36. 学无止境的CSS(xHTML+CSS技巧教程资源大全) « theU0net.Blog

    […] 详解CSS的优先权 | 怿飞 […]

  37. 37. 还是再推荐一下这个CSS技巧教程资源大全 | SiteComment

    […] 详解CSS的优先权 | 怿飞 […]

  38. 38. 头像 肉肉

    了解其中道理。原来有公式!

  39. 39. 网站建设技集 » Blog Archive » XHTML+CSS技巧教程资源大全

    […] 详解CSS的优先权 | 怿飞 […]

  40. 40. 头像 伊水笑

    分析的很好,谢谢

  41. 41. 学无止境的CSS(xHTML+CSS技巧教程资源大全)【推荐】

    […] 详解CSS的优先权 | 怿飞 […]

  42. 42. 详解CSS的优先权 [转载] @ Der's Blog

    […] 转载出处:http://www.planabc.net/2008/05/06/css_specificity/ 发现很多朋友对 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) css命名规范 [转载] 部分浏览器不兼容原因 [转载] […]

  43. 43. 详解CSS的优先权 [转载] « Der's Blog

    […] 转载出处:http://www.planabc.net/2008/05/06/css_specificity/ […]

  44. 44. 学无止境的CSS(xHTML+CSS技巧教程资源大全) | 前端殿堂

    […] 详解CSS的优先权 | 怿飞 发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化? CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。 […]

  45. 45. 详解 CSS 的优先权 | WebCooky

    […] 转载自 详解 CSS 的优先权 | PlanABC – 怿飞’s Blog […]

  46. 46. 详解 CSS 的优先权 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广

    […] 转载自 详解 CSS 的优先权 | PlanABC – 怿飞’s Blog […]

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签