摘要：前端杂谈权重权重想必大家都听说过一些简单的规则大部分人也都知道较长的权重会大于较短的权重高于但是具体规范是什么浏览器是按照什么标准来判定不同选择器的权重的呢让我们来看一下官方文档是怎么说的第一个关键词官方文档中用特异性来表示一个和其元素的相
前端杂谈: CSS 权重 (Specificity)
css 权重想必大家都听说过, 一些简单的规则大部分人也都知道:
较长的 css selector 权重会大于较短的 css selector
id selector 权重高于 class selector.
但是具体规范是什么? 浏览器是按照什么标准来判定不同选择器的权重的呢?
让我们来看一下官方文档是怎么说的~
第一个关键词: SpecificitySpecificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors
官方文档中用 Specificity: 特异性 来表示一个 css selector 和其元素的相关性. 相关性越强, 即表示表示其权重最高.
那么问题来了, Specificity 是如何被比较的呢?Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
Specificity 是由 selector 中 不同 selector type 的数目决定的.
第二个关键词: Selector Type根据 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) 有更高的优先级. 这也和我们平时的经验相吻合.
还有一些 css 选择器你没提, 它们该怎么计算权重?除了上面 Specificity 计算规则中的 css 选择器类型, 还有一些选择器如: *, +, >,:not() 等. 这些选择器该如何计算其权重呢?
答案是这些选择器并不会被计算到 css 的权重当中 :)
有一个需要特别注意一下的选择器: :not(), 虽然它本身是不计权重的, 但是写在它里面的 css selector 是需要计算权重的.
如果 a,b,c,d 算完都一样, 怎么办?默认行为是: 当 specificity 一样时, 最后声明的 css selector 会生效.
如果我重复同样的 css selectory type, 权重会增加吗?让我们来做个实验, 我们声明一个 html 节点:
test div
在 css 中我们添加两个选择器:
.testClass.testClass {
background-color: red;
}
.testClass {
background-color: black;
}
如果重复的 css selector 会被忽略的话, 按照前面的规则, 最后声明的 css selector 会生效, 所以 这个 div 节点背景色应该是黑色. 让我们看看结果:
结果我们得到的是一个红色的 div, 也就是说 .testClass.testClass 高于 .testClass. 所以结论是: 重复的 css selector, 其权重会被重复计算.
关于 !important:按照 MDN的说法, !important 是不在 css 选择器的权重计算范围内的, 而它之所以能让 css 选择器生效是因为浏览器在遇见 !important 时会进行特殊的判断. 当多个 !important 需要进行比较时, 才会计算其权重再进行比较.
通常来说, 不提倡使用 !important. 如果你认为一定要使用, 不妨先自检一下:
一些误导的信息总是先考虑使用权重更高的 css 选择器, 而不是使用 !important
只有当你的目的是覆盖来自第三方的 css(如: Bootstrap, normalize.css)时, 才在页面范围使用 !important
永远不要 在你写一个第三方插件时使用 !important
永远不要在全站范围使用 !important
我在搜索关于 css 权重的资料时, 看到了下面这张图, 看似十分有道理, 但其实是错误的!
让我们来做一个简单的测试:
按照图片中的计算公式: 如果一个 css 选择器包含11 个 class selector type, 另一个选择器是1 个 id selector type. 那么 class 选择器的权重会高于 id 选择器的权重. 让我们来试一试:
.testClass.testClass.testClass.testClass.testClass.testClass
.testClass.testClass.testClass.testClass.testClass {
background-color: red;
}
#testId {
background-color: black;
}
让我们看看结果:
结果显示还是 id 选择器权重更高.
虽然我们在实际编码过程中很少会出现 10 多个 class 的情况, 但万一出现了, 知道权重真正的计算和比较规则, 我们才能正确的处理~
想了解更多 前端 和 数据可视化 ?这里是我的 D3.js 、 数据可视化 的 github 地址, 欢迎 star & fork
D3-blog
如果觉得本文不错的话, 不妨点击下面的链接关注一下 : )github 主页
知乎专栏
掘金
想直接联系我 ?邮箱: ssthouse@163.com
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114235.html
摘要：第二等代表选择器，如，权值为。第三等代表类，伪类和属性选择器，如，权值为。第五等通配符子选择器相邻选择器等的。第六等继承的样式没有权值。 CSS中选择器优先级的权重计算 先看一段代码，如下： a{ color: red; } #box a{ color: green; } [class=box] a{ c...
摘要：文档流指的是元素按照在中为的位置顺序决定排布的过程，在排布过程中，将窗体自上而下分为一行行，并在每行中从左至右的顺序排放元素。 一篇文章包你学会使用pure.css框架，理解其原理，并学会其包含css知识，学会自己写css组件 前提知识 选择器介绍 优先级就是分配给指定css声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。而当优先级与多个css声明中任何一个声明的优先...
摘要：文档流指的是元素按照在中为的位置顺序决定排布的过程，在排布过程中，将窗体自上而下分为一行行，并在每行中从左至右的顺序排放元素。 一篇文章包你学会使用pure.css框架，理解其原理，并学会其包含css知识，学会自己写css组件 前提知识 选择器介绍 优先级就是分配给指定css声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。而当优先级与多个css声明中任何一个声明的优先...
摘要：层叠样式表层叠规则你或许知道是层叠样式表的缩写。但你不一定真正的理解了其中层叠的含义。用户自定义样式虽然规范中有，但从起，开始不支持用户自定义样式表，而是建议使用扩展来实现。网站提供的样式表，则是我们所提供的的样式。即不为的元素的计算值为。 层叠样式表 层叠规则 你或许知道 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。但你不一定真正的理解了其中层叠的含...
阅读 3037·2023-04-25 18:43
阅读 627·2021-11-24 09:39
阅读 1149·2021-10-14 09:43
阅读 3675·2021-09-22 15:58
阅读 1652·2019-08-29 17:18
阅读 276·2019-08-29 14:14
阅读 2954·2019-08-29 13:01
阅读 1488·2019-08-29 12:33
