码迷,mamicode.com
首页 > Web开发 > 详细

CSS选择器的权重计算

时间:2018-02-04 11:09:00      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:markdown   name   app   comm   comment   指定   多个   gpo   伪类   

什么是CSS选择器权重?

即使在不太复杂的样式表中,要寻找同一元素可能有两个或者更多规则,当同一元素被多个不同来源的样式规则设置了样式后,如何处理样式规则的冲突,显示元素最后的样式,用到的计算规则就是CSS选择器的权重规则。

根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有一般选择器的规则。如果两个规则的特殊性相同,那么后定义的规则优先。

特殊性

为了计算规则的特殊性,给每种选择器都分配一个数字值。然后,将规则的每个选择器的值加在一起,计算出规则的特殊性。特殊性的计算不是以10为技术的,而是采用一个更高的未指定的基数。这能确保非常特殊的选择器(比如ID选择器)不会被大量一般选择器(比如类型选择器)所超越。但是,为了简化,如果在一个特定选择器中的选择器数量少于10个,那么可以以10为基数计算特殊性。

选择器的特殊性分成4个成分等级:a, b, c 和 d。

  • 如果样式是行内样式,那么a=1

  • b等于ID选择器的总数

  • c等于类,伪类和属性选择器的数量

  • d等于类型选择器和伪元素选择的数量

使用这些规则可以计算任何CSS选择器的特殊性。下面的表格给出了一系列选择器以及相应的特殊性。

选择器 特殊性 以10为技术的特殊性
Style=" " 1,0,0,0 1000
#wrapper #content {} 0,2,0,0 200
#content .name {} 0,1,1,0 110
div#ontent {} 0,1,0,1 101
#content {} 0,1,0,0 100
p.comment .name {} 0,0,2,1 21
p.comment {} 0,0,1,1 11
div p {} 0,0,0,2 2
p {} 0,0,0,1 1

用style属性编写的规则总是比其他任何规则特殊。具有ID选择器的规则比没有ID选择器的规则特殊,具有类选择器的规则比只有类型选择器的规则特殊。如果两个规则的特殊性相同,那么后定义的规则优先。

CSS选择器的权重计算

标签:markdown   name   app   comm   comment   指定   多个   gpo   伪类   

原文地址:https://www.cnblogs.com/nanxia/p/8411992.html

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