【CSS 知识总结】第三篇 - CSS 选择器的权重和优先级_旅游资讯

【CSS 知识总结】第三篇 - CSS 选择器的权重和优先级

创始人

2025-05-30 15:32:43

0次

一，前言

上一篇，主要介绍了 HTML 扩展内容；部分，包含以下内容：

HTML 的文档声明；
meta 元信息；
HTML Entity 字符实体；

从本篇开始，进入 CSS 选择器部分的介绍；

当项目结构比较复杂时，容易出现一个元素同时被添加多个样式的情况
这时可能会出现问题：明明写好的样式却被覆盖掉了。。。那么，CSS 样式覆盖的问题，是否会遵循某种规律呢？
这里就涉及到选择器的权重和优先级的概念；

本篇，将介绍 CSS 选择器的权重和优先级;

二，CSS 的三大特性

继承性：元素能够继承父元素的某些样式属性；
优先级：决定了两个元素发生覆盖时，谁将被覆盖;
层叠性：重复代码会发生合并，只有一个真正起作用；

三，CSS 选择器的优先级

MDN：CSS 优先级

权级	权值	选择器	备注
0级	0000	通配选择器	通配选择器（`*`）、选择符（`+`、`>`、`~`、空格、或）、not
1级	0001	元素选择器	元素、关系、伪元素，如：`div`、`p`；
2级	0010	class 选择器	类选择器、属性选择器、伪类，如：`.content`、`:hover`；
3级	0100	id 选择器	如：`#content`；
4级	1000	内联选择器	如：`style=""`；
5级	10000	!important	不推荐在项目中使用

总结一下，以下选择器对优先级没有影响：

通配选择器：*；
关系选择器：+、>、~、' '；
否定伪类：:not()；（注意，在:not()内部声明的选择器会影响优先级）

四，CSS 选择器优先级的计算

选择器会被划分为 4 个等级（排除了 10000 和 0000），每个等级就代表了一类选择器；
优先级总值 = 各等级的选择器个数 * 对应等级权值的总和；

CSS 优先级的计算遵循以下规则：

元素标签中定义了的内联样式，积 1,0,0,0 分；
每个 id 选择器，积 0,1,0,0 分；
每个 class 选择器、属性选择符、伪类，积 0,0,1,0 分；
每个元素选择器、伪元素选择器，积 0,0,0,1 分；

备注：

伪类 :not() 本身不具有任何优先级，但在它的括号内的内容会被累计到优先级值中；

五，CSS 选择器的权重

权重顺序：

!important > 内联样式 > id 选择器 > class 选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认；

!important：优先级最高；
元素属性：较高优先级；
相同权重下：后面覆盖前面的；

六，面试题

CSS 选择器的权重和优先级的考察，一般会给出一段代码，问最终显示的效果，即判断谁覆盖了谁，为什么;

todo：面试题

七，结尾

本篇，主要介绍了 CSS 选择器部分，主要涉及一下几点：

CSS 的三大特征；
CSS 选择器的优先级；
CSS 优先级的计算规则；
CSS 选择器的权重；
CSS 选择器面试题；

下一篇，介绍 CSS 选择器伪类和伪元素；

维护日志

20211125
- 优化 “CSS 选择器的优先级” ，创建表格；
- 添加 “CSS 优先级的计算规则”；

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：Springboot中使用AOP

下一篇：飞猪与摩洛哥国家旅游局达成战略合作，为中国游客解锁梦幻摩洛哥之旅