一，前言

上一篇，主要介绍了 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 选择器伪类和伪元素；

维护日志

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