关于CSS Selector的优先级
今天在google reader上看到一篇博文，然后在问了组里的几位同事之后才发现自己曾经一直对css selector的理解存在着误区。据说老外的文章中很早就提到了关于css selector是优先级算法，只是到了国内被部分人员翻译之后，误解了其中的含义，导致现在很多人以为css选择符的优先级运算是将ID名、类名等等全部相加后做比较的。 这样认为的人，其中一个就是我，而今天我才真正认识到这个css选择符的运用。不知道自己的那本《CSS那些事儿》有没有提到，如果有的话，我估计很有可能也是那种错误的理解，在这里小志对各位读者朋友表示十分的抱歉。 在这里也感谢小繁的blog中提到了这个选择符的问题，然后小志我有机会明白，更感谢组内的同事分享。 这篇博文命名为《CSS Selector的优先级》，主要是围绕“11个class与1个id”的话题展开的，具体的小志就在这里就不再啰嗦，大家可以点击上面的链接直接浏览。简单的来说就是这样的，一个拥有id名和class名的div被十个div包含着，然后样式是： .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;} #b{color:green;} HTML结构比较长，如下： 按照以往的理解，都说css中的class是10，id是100，然后脑袋中很自然地就想到，11个class的话，那么不就是110了嘛。这样就一定会比id要大了，最终的颜色应该是红色，但其实不然，最终的颜色是绿色，是那个id的颜色。 当时看到这个我表示十分纳闷，然后看文中的介绍又是一头雾水，后来经过组内同事指导以及个人心中对自我很严重的BS之后，终于明白了为什么会这样。其实当时在看一些书籍的时候，其中介绍到的那些1和0组成的数字，其实仅仅只是1和0而已，并不是1000、100、10、1之类。 引用一下小繁的blog的图片。 在图中可以看到，一个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/ 本文链接：http://www.blueidea.com/tech/web/2011/8388.asp 2012夏季新款韩版季女装高腰吊带无袖连衣裙2012夏季新款韩版时尚百搭吊带网纱连衣裙如奕正品 2012春夏 新款 女 可爱波点 蛋糕群摆 雪纺连衣裙夏装2011新款韩版复古甜美蝴蝶结低腰碎花短袖连衣裙收腰原单棉白益多派宁专卖店2012夏季新款韩版季女装高腰吊带无袖连衣裙2012夏季新款韩版时尚百搭吊带网纱连衣裙如奕正品 2012春夏 新款 女 可爱波点 蛋糕群摆 雪纺连衣裙夏装2011新款韩版复古甜美蝴蝶结低腰碎花短袖连衣裙收腰原单棉白艾维伦家居旗舰店【6折特价】姐妹花 优雅蕾丝聚胸上托B杯文胸3141【姐妹花内衣】 时尚蕾丝包边聚胸A杯文胸3105【姐妹花内衣】简约时尚侧收B杯文胸9023H2 女装频道 电器
CSS Selector的优先级
