「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战」。
一，前言
上一篇，主要介绍了 HTML 扩展内容；部分，包含以下内容：
- HTML 的文档声明；
- meta 元信息；
- HTML Entity 字符实体；
从本篇开始，进入 CSS 选择器部分的介绍；
当项目结构比较复杂时，容易出现一个元素同时被添加多个样式的情况
这时可能会出现问题：明明写好的样式却被覆盖掉了。。。
那么，CSS 样式覆盖的问题，是否会遵循某种规律呢？
这里就涉及到选择器的权重和优先级的概念；
本篇，将介绍 CSS 选择器的权重和优先级;
二，CSS 的三大特性
- 继承性：元素能够继承父元素的某些样式属性；
- 优先级：决定了两个元素发生覆盖时，谁将被覆盖;
- 层叠性：重复代码会发生合并，只有一个真正起作用；
三，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 优先级的计算规则”；
