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

CSS选择器的权重详解相关推荐

css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
CSS相对定位和绝对定位详解
CSS相对定位和绝对定位详解如果,说浮动, 关键在一个 "浮" 字上面, 那么我们的定位,关键在于一个 "位" 上. PS: 定位是我们CSS算是数一数二难 ...
css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题比如 border: 0xp solid #fff;两个浏 ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
html 自定义打印模板,HTML+CSS入门自定义模板详解
本篇教程介绍了HTML+CSS入门自定义模板详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 首先总的stylecss和大模板都是当初angel_Kitty学姐的,嗯, ...
关于CSS选择器的权重计算
CSS选择器的权重计算公式大概如下: 内联样式表的权值最高为 1000: ID 选择器的权值为 100 Class 类选择器.属性选择器.伪类的权值为 10 HTML 元素选择器.伪元素的权值为 1 ...

CSS选择器的权重详解

CSS选择器的权重详解相关推荐

最新文章

热门文章