码迷,mamicode.com
首页 > 其他好文 > 详细

选择器的权重与优先规则

时间:2017-06-25 17:50:31      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:ant   color   规则   文章   如何   理解   问题   编程语言   错误   

1、权重排比

“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”

那 么这个顺序是怎么得出来的呢?实际上在CSS2规范关于具体性(specificity)的定义中,描述是非常明确的,但是很多中文版本的css图书中采 用了10进制的简单相加计算方式(包括第一版《CSS权威指南》,第二版中已经纠正)。因此把规范中对CSS层叠优先级的相关定义意译一下,希望给初入门 或对权重计算尚有疑惑的朋友提供一些参考。 根据CSS规范,具体性越明确的样式规则,权重值越高。计算权重值的依据,并不是许多文章所描述的那样“class是10,标签是1,ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。   2、选择器权重值的计算

A:如果规则是写在标签的style属性中(内联样式),则A=1,否则,A=0. 对于内联样式,由于没有选择器,所以B、C、D的值都为0,即A=1, B=0, C=0, D=0(简写为1,0,0,0,下同); B:计算该选择器中ID的数量。(例如,#header 这样的选择器,计算为0, 1, 0, 0); C:计算该选择器中伪类及其它属性的数量(包括class、属性选择器等,不包括伪元素)。 (例如,.logo[id=‘site-logo‘] 这样的选择器,计算为0, 0, 2, 0); D:计算该选择器中伪元素及标签的数量。(例如,p:first-letter 这样的选择器,计算为0, 0, 0, 2)。 CSS2规范中给出的一些例子:     *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */     li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */     li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */     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 */     ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */     li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */     #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */     style=”"          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ 根据这样的定义,所以很多文章简单地把规则归纳为:内联样式的权重值是1000,ID选择器的权重值是100,class选择器的权重值是10,标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值,数字越大权重值越高。 大多数情况下,按照这样的理解得出的结论没有问题,但是遇到下面这样的情况就出现问题了:     样式一:body header div nav ul li div p a span em {color: red}     样式二:.count {color: blue} 按照错误的计算方法,样式一的权重值是11,样式二的权重值是10,如果这两条规则用于同一个元素,则该元素应该是红色。实际结果却是蓝色。   3、权重值的比较

       按照四组计算的正确方法,上面例子中的样式一权重值应该是0, 0, 0, 11,样式二的权重值是0, 0, 1, 0。 根据规范,计算权重值时,A,B,C,D四组值,从左到右,分组比较,如果A相同,比较B,如果B相同,比较C,如果C相同,比较D,如果D相同,后定义的优先。 样式二和样式一的A、B相同,而样式二的C大于样式一,所以,不管D的值如何,样式二权重值都大于样式一。这就是正确的答案。   4、特殊的 !important

在按照ABCD四组计算比较之外,在定义样式的时候,还可以对某一个属性应用 !important。对于一直从事编程而没做过重构的人,需要特别注意的是这里的“!”与其在编程语言中的意义刚好相反,不是代表“不重要”而是代表“很重要”。 CSS2规范中规定:!important 用于单独指定某条样式中的单个属性。对于被指定的属性,有 !important 指定的权重值大于所有未用 !important 指定的规则。 例如:     样式一: #header nav ul li.current {color: red; font-weight: bold;}     样式二: li:hover {color: blue !important; font-weight: normal;} 就整条规则而言,样式一的权重值为 0, 1, 1, 3,而样式二的权重值仅为0, 0, 0, 2。所以应用于相同元素时,应该样式一生效。但是对于color这个属性,由 在样式二中用 !important 做了指定,因此color将应用样式二的规则。而font-weight则按照规定用样式一的规则。 如果多条规则中都对同一个属性指定了 !important 呢?这时候 !important 的作用相互抵销,依然按照ABCD四组计算比较。 因此 !important 的作用只有在具有唯一性时才能提现,但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了 !important 的属性,所以最好的办法就是:不要使用 !important。

选择器的权重与优先规则

标签:ant   color   规则   文章   如何   理解   问题   编程语言   错误   

原文地址:http://www.cnblogs.com/cheng-du-lang-wo1/p/7077121.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!