大家好,我是宝哥。
今天前端刷题02:CSS 选择器的优先级是如何计算的?
全部题目:https://github.com/yangshun/front-end-interview-handbook
前端刷题系列正在更新:02/100+
02:CSS 选择器的优先级是如何计算的?
原项目回答
浏览器通过优先级规则,判断元素展示哪些样式。优先级通过 4 个维度指标确定,我们假定以a、b、c、d
命名,分别代表以下含义:
a
表示是否使用内联样式(inline style)。如果使用,a
为 1,否则为 0。b
表示ID
选择器的数量。c
表示类选择器、属性选择器和伪类选择器数量之和。d
表示标签(类型)选择器和伪元素选择器之和。
优先级的结果并非通过以上四个值生成一个得分,而是每个值分开比较。a、b、c、d
权重从左到右,依次减小。判断优先级时,从左到右,一一比较,直到比较出最大值,即可停止。所以,如果b的值不同,那么c
和d
不管多大,都不会对结果产生影响。比如0,1,0,0
的优先级高于0,0,10,10
。
当出现优先级相等的情况时,最晚出现的样式规则会被采纳。如果你在样式表里写了相同的规则(无论是在该文件内部还是其它样式文件中),那么最后出现的(在文件底部的)样式优先级更高,因此会被采纳。
在写样式时,我会使用较低的优先级,这样这些样式可以轻易地覆盖掉。尤其对写 UI 组件的时候更为重要,这样使用者就不需要通过非常复杂的优先级规则或使用!important
的方式,去覆盖组件的样式了。
参考
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://www.sitepoint.com/web-foundations/specificity/
我的补充回答
CSS 选择器优先级决定了当多个规则应用于同一元素时,哪条规则的样式会被应用。优先级由选择器的特殊性 (specificity) 决定,特殊性越高,优先级越高。
特殊性计算方法
特殊性由四个部分组成,从左到右,重要性依次递减:
内联样式 (Inline styles): 元素的
style
属性中定义的样式,特殊性值为1,0,0,0
。例如:<div style="color: red;"></div>
。ID 选择器 (ID selectors): 使用 # 符号选择元素,特殊性值为
0,1,0,0
。例如:#header
。类选择器、属性选择器和伪类 (Class selectors, attribute selectors, and pseudo-classes): 使用
.
,[ ]
,:
选择元素,特殊性值为0,0,1,0
。例如:.button
,[type="text"]
,:hover
。元素选择器和伪元素 (Type selectors and pseudo-elements): 使用元素名称或
::
选择元素,特殊性值为0,0,0,1
。例如:div
,::before
。
计算规则:
将每个选择器的特殊性值相加,得到一个四位数。
比较四位数,从左到右,数值大的优先级更高。
如果四位数完全相同,则后定义的规则优先级更高。
!important
规则具有最高的优先级,它会覆盖任何其他规则。
示例
/* 特殊性值: 0,1,0,0 */
#header {
color: red;
}
/* 特殊性值: 0,0,1,1 */
div.content p::first-line {
color: blue;
}
在上面的例子中,#header
的特殊性值更高,因此它的样式会被应用。
注意事项
通配符选择器 (
*
) 和关系选择器 (例如+
,~
) 对特殊性没有贡献。计算特殊性时,不要考虑继承的样式。
总结
了解 CSS 选择器优先级计算方法,可以帮助您更好地控制样式的应用,避免样式冲突,并编写更加可维护的 CSS 代码。
最后
如果你觉得宝哥今天的尝试对你有帮助,就给我点个赞,关注一波。分享出去,也许你的转发能给别人带来一点启发。
以后我也会多尝试共读其它项目,如果看到喜欢的项目也可以留言告诉我,今天的教程你学会了吗?学会了,就在评论区刷一个,学会了。
欢迎长按图片加好友,宝哥会第一时间和你分享前端行业趋势,面试资源,学习途径等等。
添加好友备注【加群】拉你进技术交流群
公众号
:前端开发博客
专注前端开发技术
,分享前端开发资源
和WEB前沿资讯
,如果喜欢我的分享,给 宝哥 点一个赞
或者分享
都是对我的支持
关注公众号后,在首页:
回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱
回复「读书」下载成长的相关电子书