新浪UED

CSS Selector的优先级

by zhongfan / 博客,网页重构 / 2011-03-21
CSS Selector的优先级

上周五下班前我们敬爱的三三大人又在组里讨论了关于“11个class与一个id”谁的优先级高的问题~_~!


猜一下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{font-family: "Microsoft YaHei";}
.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;}
#b{color:green;}
</style>
</head>

<body>
    <div class="a1">
    <div class="a2">
    <div class="a3">
    <div class="a4">
    <div class="a5">
    <div class="a6">
    <div class="a7">
    <div class="a8">
    <div class="a9">
    <div class="a10">
    <div class="a11" id="b">
    	CSS Selector的优先级
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
</body>
</html>

答案很明显就是你看到的那样儿,究竟为什么一时又很难说的清楚。

今天突然想到精通css里讲到过关于css特殊性的计算,原来是酱紫的…

所有的selector都被分配一个数值(包含内联),将所有selector值相加得到最终优先级。但是计算中并不是满10进1来计算,而是采用一个没有指定的更高的基数。保证高级别的selector(id)不被那11个或者更多低级的selector组合超出。
selector的特殊性分四个等级:a,b,c,d可将a看成是最高位以此类推

  • 如果样式为内联a=1
  • b为id的总数
  • c为class, pseudo-class, and attribute selectors总数

得出此表:

文章评论

  1. lin04com 说:

    呵呵,这是一个老生常谈的问题了:
    style : 1,0,0,0
    id : 0,1,0,0
    class : 0,0,1,0
    el : 0,0,0,1
    * : 0,0,0,0

  2. 断桥残雪 说:

    css选择器的优先级abcd排名跟奥运金牌积分榜一样的排名算法,如果这样说,就更加通俗易懂了

  3. AXURE 说:

    走好规范,何必多考虑

  4. 上海SEO 说:

    要学习下DIV+CSS了

  5. 网络营销 说:

    优先级代表权重的传递吗?

  6. 匿名 说:

    ….. class style id 这个顺序还用费时研究,,, 你们的目的是什么?

  7. Tapir 说:

    有没讨论256个的情况呢,活活活,有惊喜哦~~

  8. 萝卜平淡 说:

    CSS Mastery
    Advanced Web Standards Solutions (Second Edition) page 27.

  9. 晨光 说:

    以前还真没有认真研究一下这个

  10. 馒头 说:

    以前听说过优先级这个概念,但一直不知道是什么东西,现在似乎明白了……

  11. fishhsif 说:

    不认真研究,有时候真可能撞枪口上哦~

  12. 以前一直没搞懂CSS 选择优先级,今天总算明白啦

  13. XiaoXiong 说:

    其实这个算法,在各个浏览器中的支持度是不一样的…….

  14. 曲双如 说:

    嗯,又测试了一下。
    .a.b.c.d.e.f.g.h.i.j.k 11个类 也不如 #l 一个优先级高。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

* 验证图片 刷新验证码

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>