前端杂谈: CSS 权重 (Specificity)
前端杂谈: CSS 权重 (Specificity)
css 权重想必大家都听说过, 一些简单的规则大部分人也都知道:
-
较长的 css selector 权重会大于较短的 css selector
-
id selector 权重高于 class selector.
但是具体规范是什么? 浏览器是按照什么标准来判定不同选择器的权重的呢?
让我们来看一下官方文档是怎么说的~
第一个关键词: Specificity
Specificity 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 节点:
<div> <div id="testId" class="testClass"><span>test div</span></div> </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 :tada:
如果觉得本文不错的话, 不妨点击下面的链接关注一下 : )
想直接联系我 ?
邮箱: ssthouse@163.com

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
浅谈Redux中间件的实践
最近项目前端开发框架采用React+Redux进行实现,但是,如何异步访问服务器端,以及想要在开发过程中进行状态树日志的输出,所以怎么才能解决这两个问题? 采用Redux中间件 为什么要使用中间件 在利用Redux进行状态管理时,用户在UI层面触发行为,一个action对象通过store.dispatch派发到Reducer进行触发,接下来Reducer会根据type来更新对应的Store上的状态树,更改后的state会触发对应组件的重新渲染。如下图所示。在这个流程中,action对象是一个同步的对象,是一个包含type字段的简单对象,但是在访问服务器时,由于浏览器是单线程的,不会一遍渲染组件一遍等待服务器返回的结果,因此我们需要设计一种异步访问服务器的方法来实现与服务器端的正常通信。 中间件介绍 在Redux架构下,一个action对象在通过store.dispatch派发,在调用reducer函数前,会先经过一个中间件环节,如下图所示。 从上图可以看出,在一个Redux架构中可以用多个中间件,这些中间件一起组织处理请求的“管道”。一个中间件是一个独立的函数,可以组合使用,中间件有一...
- 下一篇
开发转测试七年,我从测试策略到测试架构(Test architecture)
程序员之间流传着这样一句顺口溜:有人喜欢创造世界,他们做了开发者;有的人喜欢开发者,他们做了测试员。什么是软件测试?软件测试就是一场本该在用户面前发生的灾难提前在自己面前发生了,这会让他们生出一种救世主的感觉,拯救了用户,也就拯救者这个软件,避免了他们被卸载的命运。 今年是我做软件测试的第7个年头了,当年我从软件开发转做软件测试的时候,没有想过我能在这个领域做这么久。在这7年里面,我在软件测试领域摸爬滚打,从自动测试起步,逐步接触到软件测试的各个领域:各种测试方法(等价类,全配对等)、测试技术(单元测试,功能测试,性能测试,探索性测试等)、自动化测试工具(JUnit,Selenium,Gatling,ZAP等)、测试流程(传统测试流程,敏捷测试流程等)以及测试策略(测试象限和测试金字塔等)。 其中“测试策略”在测试业界是讨论的比较少的,因为大多数人的工作重点是设计测试用例,执行测试或者开发和维护自动化测试,而只有少部分人才会涉及到测试策略的工作,从而导致很多测试人员其实并没有系统的了解测试策略。 所以我准备将我这几年对于测试策略的经验、总结以及思考以系列文章的形式写出来,希望能稍...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2全家桶,快速入门学习开发网站教程
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,CentOS8安装Elasticsearch6.8.6
- 2048小游戏-低调大师作品
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7