前言
css 权重想必大家都听说过, 一些简单的规则大部分人也都知道:
- 较长的 css selector 权重会大于较短的 css selector
- id selector 权重高于 class selector
但是具体规范是什么? 浏览器是按照什么标准来判定不同选择器的权重的呢?
按照官方的表述，css优先级如下
！important>行间样式>id选择器>class选择器 属性选择器>标签选择器>通配符
内联样式的权重为： 1000
ID选择符的权重为： 0100
类（class）选择符的权重为： 0010
属性选择符的权重为： 0010
类型选择符的权重为： 0001
继承样式的权重为： 0000
通配符选择器： 0000根据 W3 标准中的规定, css selector 分为 4 种 type: a, b, c, d. 他们的数目计算规则为:
- a: 如果 css 属性声明是写在
style=“”中的, 则数目为 1, 否则为 0 - b: id 选择器的数目
- c: class 选择器, 属性选择器(如
type=“text”), 伪类选择器(如:::hover) 的数目 - d: 标签名(如:
p,div), 伪类 (如::before)的数目
在比较不同 css selector 的权重时, 按照 a => b => c => d 的顺序进行比较.
由第一个 selector type a 的计算规则可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具有最高的优先级.
而 id selector (b) 相较 class selector (c) 有更高的优先级. 这也和我们平时的经验相吻合
如果 a,b,c,d 算完都一样, 怎么办?
默认行为是: 当 specificity 一样时, 最后声明的 css selector 会生效.
这里来做一个测试如果我们重复同样的 css selectory type, 权重会增加吗?
<style type="text/css">
.repeat.repeat{
background: red;
}
.repeat{
background: blue;
}
</style>
<body>
<div class="repeat">哈喽</div>
</body>如果重复的 css selector 会被忽略的话, 按照前面的规则, 最后声明的 css selector 会生效, 所以 这个 div 节点背景色应该是蓝色. 让我们看看结果:
结果我们得到的是一个红色的 div, 也就是说 .repeat.repeat 高于 .repeat 所以结论是: 重复的 css selector, 其权重会被重复计算.
关于 !important:
按照MDN的说法,!important是不在 css 选择器的权重计算范围内的, 而它之所以能让 css 选择器生效是因为浏览器在遇见!important时会进行特殊的判断. 当多个!important需要进行比较时, 才会计算其权重再进行比较.
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
