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

一，前言

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

• HTML 的文档声明；

• meta 元信息；

• HTML Entity 字符实体；

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

当项目结构比较复杂时，容易出现一个元素同时被添加多个样式的情况

这时可能会出现问题：明明写好的样式却被覆盖掉了。。。

那么，CSS 样式覆盖的问题，是否会遵循某种规律呢？

这里就涉及到选择器的权重和优先级的概念；

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

二，CSS 的三大特性

• 继承性：元素能够继承父元素的某些样式属性；

• 优先级：决定了两个元素发生覆盖时，谁将被覆盖;

• 层叠性：重复代码会发生合并，只有一个真正起作用；

三，CSS 选择器的优先级

MDN：CSS 优先级

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

• 通配选择器：*；

• 关系选择器：+、>、~、' '；

• 否定伪类：: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 选择器伪类和伪元素；