面试官：CSS 选择器的优先级是如何计算的？

最新推荐文章于 2024-05-14 18:04:32 发布

前端开发博客

最新推荐文章于 2024-05-14 18:04:32 发布

阅读量976

点赞数 28

文章标签： css 前端

本文链接：https://blog.csdn.net/lgno2/article/details/138406856

版权

大家好，我是宝哥。

今天前端刷题02：CSS 选择器的优先级是如何计算的？

全部题目：https://github.com/yangshun/front-end-interview-handbook

前端刷题系列正在更新：02/100+

浏览器通过优先级规则，判断元素展示哪些样式。优先级通过 4 个维度指标确定，我们假定以a、b、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。

/* 特殊性值: 0,1,0,0 */
#header {
  color: red;
}

/* 特殊性值: 0,0,1,1 */
div.content p::first-line {
  color: blue;
}

在上面的例子中，#header 的特殊性值更高，因此它的样式会被应用。

了解 CSS 选择器优先级计算方法，可以帮助您更好地控制样式的应用，避免样式冲突，并编写更加可维护的 CSS 代码。

如果你觉得宝哥今天的尝试对你有帮助，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

以后我也会多尝试共读其它项目，如果看到喜欢的项目也可以留言告诉我，今天的教程你学会了吗？学会了，就在评论区刷一个，学会了。

欢迎长按图片加好友，宝哥会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

添加好友备注【加群】拉你进技术交流群

公众号：前端开发博客 专注 前端开发技术，分享 前端开发资源和 WEB前沿资讯，如果喜欢我的分享，给宝哥点一个 赞 或者 分享 都是对我的支持

关注公众号后，在首页：

关注