层叠

CSS 即 Cascade Stylesheets，层叠样式表。

层叠是一种算法，用来解决多重规则可能出现的冲突。

​​CSS 的四个阶段因素：

1. 位置 Position

2. 来源 Origin

3. 优先级 Specificity

4. 重要性 Importance

位置 Position

样式可能来源于：

• <link> 标签或 <style> 标签

• 元素的 style 属性

如果你有多个 <link> 标签，最底下的 <link> 有更高的优先级。<style> 也是一样的。

如果 <style> 后有 <link> ，则 <link> 有更高的优先级。

内联 style 属性会有最高的优先级，会覆盖别的 CSS ，除非规则定义了 !important 。

规则内部同样也遵循后者覆盖前者：

.my-element {
  background: green;
  background: purple; /* win */
}

浏览器会忽略无法理解的属性值，而不是报错。比如有的浏览器可能不支持 clamp() ，则只有前一个 font-size 生效：

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, calc(1rem + 3vw), 2rem);
}

优先级 Specificity​

对类使用 CSS 和对元素类型使用 CSS ，前者优先级会高一点。

这个例子会显示红色，类的优先级高一点：

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

而 id 会有更高的优先级，它会覆盖绝大部分别的样式。所以一般不会针对 id 使用 CSS 。

优先级是累计起来的，更具体的选择器会导致难以被别的 CSS 覆盖。所以在大部分情况下应当使 CSS 保持最简。

来源 Origin

你写的 CSS 并非单一的 CSS 源，还有这些（优先级由小到大）：

1. 用户代理（ User agent ）基本样式

2. 本地用户样式

3. 授权（ Authored ） CSS

4. 带 !important 的授权 CSS

5. 带 !important 的本地用户样式

6. 带 !important 的用户代理

重要度 Impartance

有些 CSS 类型会被标记为更重要（优先级由小到大）：

1. 普通的规则类型

2. animation 规则类型

3. !importance 规则类型

4. transition 规则类型

​​可以在浏览器的 DevTools 里检查没有被应用的 CSS 规则。

---

参考

The cascade，Learn CSS - web.dev

CSS层叠 - MDN

The CSS Cascade - wattenberger