CSS特性
继承性
某些 CSS 属性会 自动从父元素继承到子元素， 即使子元素没有显式设置这些属性。
常见的可继承属性：
| 分类 | 可继承属性 | 说明 |
|---|---|---|
| 文本类 | color、font-family、font-size、font-style、font-weight、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、visibility | 常见的文字样式会继承 |
| 列表类 | list-style、list-style-type、list-style-position、list-style-image | 列表样式会继承 |
| 表格类 | caption-side、border-collapse | 表格标题与边框样式 |
| 光标类 | cursor | 鼠标样式可继承 |
合理利用继承性：
如果需要调整某些子元素中的文字效果，我们可以直接在父元素中设置，而不必使用关系选择器(>)精确定位设置文本样式
层叠性
层叠性（Cascading） 指的是当多个 CSS 规则作用到同一个元素上时，浏览器根据优先级、来源和顺序来决定最终生效的样式。
换句话说：CSS 样式是“叠上去的”，浏览器按照规则筛选最后显示哪一条
优先级
当多个选择器作用于同一个元素时，浏览器会根据 优先级来决定哪个样式生效。
- 行内样式 > ID 选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器
- 权重是4位数字组成的
权重理论模型
| 级别 | 计分 | 优先级高低 |
|---|---|---|
| 行内样式 | 1,0,0,0 | 1 |
| ID 选择器 | 0,1,0,0 | 2 |
| 类选择器、属性选择器、伪类 | 0,0,1,0 | 3 |
| 元素选择器、伪元素 | 0,0,0,1 | 4 |
通配符、继承、!important 特殊情况 | 不计分（特殊规则） | 特殊说明见下 |
!important 不属于优先级计算，但 会覆盖所有非 !important 的规则（包括行内样式）。
如果多个规则都使用了 !important，则仍按优先级比较。
行内样式的优先级非常明确、且不属于 CSS 文件本身。所以 VS Code 和 DevTools 都用 3 位数 来表示选择器特征优先级（省去第1位）
| 级别 | 计分 | 优先级高低 |
|---|---|---|
| ID 选择器 | 1,0,0 | 1 |
| 类选择器、属性选择器、伪类 | 0,1,0 | 2 |
| 元素选择器、伪元素 | 0,0,1 | 3 |
权重叠加
当一个选择器由多个部分组成时，浏览器会把各个部分的权重相加，得到整个选择器的总优先级。
css
div > .tip { ... }div的权重是001.tip的权重是010- 因此该选择器的权重是011
提示
CSS 的权重叠加是“按位相加”，不是进位加法，不会出现满10进1的情况