基础 CSS 堆叠表

CSS 层叠规则是指在同一个元素上定义了多个相同或不同的 CSS 属性时，它们的优先级如何决定的过程。这里有一个 CSS 堆叠表，用于帮助程序员理解层叠规则的实现方式。

堆叠顺序

堆叠顺序是层叠规则的第一步，它决定了元素在层叠上下文中的位置，通常与元素在 DOM 树中的位置相关。当两个元素均没有指定 z-index 属性时，按照这个堆叠顺序排序，数值越大优先级越高。

1. 背景和边框：background、border
2. 普通流中的块级元素：block-level
3. 浮动元素：float
4. 内联元素：inline
5. z-index 值为 auto 的定位元素：position: static
6. z-index 值不为 auto 的定位元素：position: relative、position: absolute、position: fixed。

属性值

如果没有指定属性值，或者属性值无法比较大小，这个属性就不参与优先级计算，例如 inherit、initial 等值。

选择器优先级

当多个选择器都能匹配同一个元素，那么它们的优先级将得到比较。优先级由四段式计算，其中每一段使用一个整数来表示，如果两个段的值相同，就比较下一段，直到可以确定优先级为止。以下是它们的顺序：

1. 行内样式（权值为 1000）
2. ID 选择器（权值为 100）
3. 类选择器、属性选择器、伪类选择器（权值为 10）
4. 元素选择器、伪元素选择器（权值为 1）

!important

当一个属性被指定了 !important 时，它将会覆盖其他任何规则。因此，尽量不要使用 !important 除非完全没有其他的解决方案。

| 权值 | 值   |
| ---- | ---- |
| 1000 | 行内样式 |
| 100  | ID 选择器 |
| 10   | 类选择器、属性选择器、伪类选择器 |
| 1    | 元素选择器、伪元素选择器 |

参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade