Ruby's Louvre

每天学习一点点算法

导航

CSS选择器的权重详解

在我们开始之前,先搞明白几个概念吧。下面是一段CSS代码:

      a {
        border-bottom: 0px;
        color: #5DB0E6;
      }
      a:focus {
        outline: 1px dotted #eee;
      }
      a:active {
        outline: 0px;
      }
      a:hover {
        color: #7bc4f4;
      }
      body#jq-interior {
        background-image: url(http://static.jquery.com/files/rocker/images/bg-interior-tile-drk.jpg);
      }

上面这个样式表是由一个个样式规则组成,而每一个样式规则又可以分为两部分:选择符与声明。选择符就相当于jQuery的选择器,能针对特定元素进行设置。CSS有名叫层叠样式表,基本上被选中的元素的子元素能继承它的样式,但其子元素如果设置了样式,也能覆写它,就像板页岩这样累在一起。随着布局表格这样落后的布局方式的式微,CSS越来越受到人们的重视。但IE6对CSS的支持不足与各种层不穷的bug,或者是某些大型网站对CSS的不合理使用,CSS的体积膨胀起来了。维护它们可是一件麻烦事,如何让元素显示出想要的样式,我们就必须对权重这个概念有所了解。权重你可以说是针对样式规则的,也可以说针对选择符。之所以这样说,因为有一个重要的标识符! important可以放到样式声明的最后,用来无视本文重点说的权重等级。我觉得最好还是不要用这东西,首先IE6对它支持不好,要支持它需要把一个样式规则分开写,另,用多了会严重扰乱CSS的权重等级。

有关CSS权重等级的介绍最早见于W3C这篇文章,听说IE5是最早支持CSS的,不知哪个早一点呢?很明显IE是没有完全照足它来实现。在《Calculating a selector's specificity》一章,它粗略地用a、b、c、d来对样式规则进行评估,给出每一个的得分(1 或 0),但没有给出最终值的计算方式。

  • a:如果这个元素应用了行内样式,它才分配此值为1。怎么是行内样式呢?就是标签内使用style="...."的方式来设置样式,我觉得这是很愚蠢的行为,徒然增加页面的体积,也非常不好维护,和使用那些纯表示样式的元素差不多,如big、small、b、u、strike 等等。这样做法,我个人觉得,浏览器其实是为它分配了一个特别的ID(实质上IE也是为页面上每个元素分配了一个uniqueId),然后把它置于样式表的最下方,于是就没有其他样式能覆盖它了。
  • b:指一个样式规则的选择符存在id选择器。比如上面的body#jq-interior ,不过这样有点累赘了。我看了许多CSS选择器的实现,还有我在做选择器的经验,body完全没有必要。一个选择符就相当于一个选择器群组,它由各种各样的选择器组成。选择器得到一个符合CSS选择符结构的字符串,如果它足够聪明的话,会先对字符串进行trim操作,然后进行扫描,看有没有id选择器,有的话会砍掉前面的部分,然后再用正则对其进行肢解……换言之,id选择器具有强烈的排它性,只有并联选择器可以容忍它。
  • c:指一个样式规则的选择符是否存在类选择器与伪类选择器(:hover,:link,:active,:target)。这些基本上CSS2.1的东西,CSS3增加的基本是结构伪类还有一个selection伪元素,没有破坏这个评分体系。
  • d:这个权重最低了,指选择符里存在标签选择器,与伪元素。何为伪元素呢?前面有::的东西就是伪元素了。注意,早期的伪元素也和伪类一样,只有一个冒号。这可能是后来w3c心血来潮,把它们分离出来(css3规范),造成今天的样子。

虽然到目前为止,我们已经知道a的权重肯定大于b,而b大于c,d最小,但这实在不好计算,对于接着下来的示例也不好解说。于是我引进外国另一个补充方案,它出于这篇名叫《CSS: Specificity Wars》的有才文章。。它把abcd当成算术上的个、十、百、千这样的计数单位,各自相乘最后一加,优先级就一目了然啦。我们甚至可以将它们转化为以下一个直观的图示。

好了,我们开始分析一下w3c的示例,看它能给我们什么多余的信息。

  /*by 司徒正美 All rights reserve*/
  *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
  /* 通配符选择器权重为0,在IE中,它无法区分元素节点与注释节点 */
  li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
  /* 标签选择器为1 */
  li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
  /* 标签选择器与伪元素为1 */
  ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
  /*这里存在后代选择器的概念,但计算权重时像它这样的关系选择器会被进一步肢解,当成两个标签选择器了。*/
  ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
  /* 无视后代选择器与相邻选择器,只看它里面的选择器的成分 */
  h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
  /* 这个相邻选择器由标签选择器与属性选择器组成,属性选择器为10 */
  ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
  /*无视后代选择器,3个标签与1个类选择器,类(className)在DOM中的位置比较显赫,
  拥有专门的getElementByClassName,等级为c,合计得分13 */
  li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
  /*两个类选择器与一个标签选择器,合计得分21 */
  #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
  /*getElementById,在页面上获得元素最快的方式,权重为b,得分100 */
  style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
  /*行内样式,得分1000,会覆盖内部样式或外部样式的设置*/

最后总结一下,十大选择器与伪元素的权重情况:

选择器 表达式或示例 说明 权重
ID选择器 #aaa 100
类选择器 .aaa 10
标签选择器 h1 元素的tagName 1
属性选择器 [title] 详见这里 10
相邻选择器 selecter + selecter 拆分为两个选择器再计算
兄长选择器 selecter ~ selecter 拆分为两个选择器再计算
亲子选择器 selecter > selecter 拆分为两个选择器再计算
后代选择器 selecter selecter 拆分为两个选择器再计算
通配符选择器 * 0
各种伪类选择器 如:link, :visited, :hover, :active, :target, :root, :not等 10
各种伪元素 如::first-letter,::first-line,::after,::before,::selection 1

相关参考链接:

posted on 2010-03-17 06:53  司徒正美  阅读(12256)  评论(5编辑  收藏  举报