这是我参与「第四届青训营 」笔记创作活动的的第4天
CSS 三大特性
- 层叠性
- 继承性
- 优先级
层叠性
- 层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。
- 样式不冲突，不会层叠
- 层叠规则：开发者样式>用户样式>浏览器样式
继承性
- 对于字体、字号、颜色、行距等文本类属性具有继承性
- 边框、外边距、内边距、背景、定位、元素高度等与块级元素相关的属性都不具有继承性
- 所有的属性都可以设置
inherit实现继承，默认不继承的属性取属性的初始值（时相当于设置了initial）
关于css 继承中的
unset
- 如果该属性是默认继承属性，该值等同于
inherit - 如果该属性是非继承属性，该值等同于
initial
更多内容参考：谈谈一些有趣的CSS题目（23）-- 谈谈 CSS 关键字 initial、inherit 、unset 和 revert · Issue #13 · chokcoco/iCSS · GitHub
优先级
在复杂的CSS样式规则中不总是按照层叠性表现，而这就是典型的优先级规则
处理优先级问题，首先要考虑权重
| 选择器 | 权重 |
|---|---|
| 通用选择器 / 继承 | 0, 0, 0, 0 |
| 元素选择器（标签选择器） | 0, 0, 0, 1 |
| 类选择器，伪类选择器，属性选择器 | 0, 0, 1, 0 |
| id选择器 | 0, 1, 0, 0 |
| 行内样式 | 1, 0, 0, 0 |
| !important | 无限高 |
- 对于简单选择器：遵照这个规则
- 对于组合选择器：需要按照选择器求和权重进行计算
计算规则：
- 多个同级权重的选择器求和没有进制，也就是说，如果有 12 个类选择器，也不会进制到前一位，选择器权重为
0，0，12，0，依然没有一个 id 选择器权重高（某些浏览器256个类选择器可以超越一个id选择器，这条规则可以忽略不计） - 比较规则：从左往右逐项比较，如果某一项高于其他规则则不看后面的权重，例如
0, 2, 0, 0高于0, 1, 15, 2 - 对于相同权重的选择器遵循层叠性规则：
!important可以被后出现的!important层叠掉
注意
js 操作 css 原理：js 并不能修改 css 样式及 css 文件，而是添加了行内样式，提高选择器的权重，因此，也可以被 !important 覆盖掉
