软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > 关于CSS Selector的优先级

关于CSS Selector的优先级

今天在google reader上看到一篇博文,然后在问了组里的几位同事之后才发现自己曾经一直对css selector的理解存在着误区。据说老外的文章中很早就提到了关于css selector是优先级算法,只是到了国内被部分人员翻译之后,误解了其中的含义,导致现在很多人以为css选择符的优先级运算是将ID名、类名等等全部相加后做比较的。

这样认为的人,其中一个就是我,而今天我才真正认识到这个css选择符的运用。不知道自己的那本《CSS那些事儿》有没有提到,如果有的话,我估计很有可能也是那种错误的理解,在这里小志对各位读者朋友表示十分的抱歉。

在这里也感谢小繁的blog中提到了这个选择符的问题,然后小志我有机会明白,更感谢组内的同事分享。

这篇博文命名为《CSS Selector的优先级》,主要是围绕“11个class与1个id”的话题展开的,具体的小志就在这里就不再啰嗦,大家可以点击上面的链接直接浏览。简单的来说就是这样的,一个拥有id名和class名的div被十个div包含着,然后样式是:

HTML结构比较长,如下:

按照以往的理解,都说css中的class是10id是100,然后脑袋中很自然地就想到,11个class的话,那么不就是110了嘛。这样就一定会比id要大了,最终的颜色应该是红色,但其实不然,最终的颜色是绿色,是那个id的颜色。

当时看到这个我表示十分纳闷,然后看文中的介绍又是一头雾水,后来经过组内同事指导以及个人心中对自我很严重的BS之后,终于明白了为什么会这样。其实当时在看一些书籍的时候,其中介绍到的那些1和0组成的数字,其实仅仅只是1和0而已,并不是1000、100、10、1之类。

引用一下小繁的blog的图片。

css selector

在图中可以看到,一个id选择符时是0,1,0,0,然后两个id的选择符则是0,2,0,0,以此类推,每增加一个id选择符的话,那么就是代表左起第二个数字会递增,仅仅只是这个数字在增加而已。同理,使用class的选择符也是一样的。那么回到前面提到的“11个class与1个id”的问题,用这样的方式计算结果就是:

  • 1个id时:0,1,0,0
  • 11个class时:0,0,11,0

扩展阅读:http://www.cssforest.org/blog/index.php?id=164

显然,这个问题中id的样式肯定会出现,而class的样式不会出现。紧记这次的教训,以后多花点时间去看老外的文章,以及去巩固和更好地掌握基础知识。这一年来,心态上一直都在迷失着,太随性了。目标和方向经常被自己遗忘,经常经历这样的事情对个人而言是好事,可以很清晰地看到自己的不足,然后进行弥补!

最后对自己说一句:继续加油,小志!

原文:http://blog.linxz.de/about_css_selector/

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

 .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;}
#b{color:green;}

    相关阅读
    网友评论
    栏目导航
    推荐软件