CSS的层叠（Cascading）

CSS 层叠（Cascading）是 CSS 处理多个样式规则冲突的方式，它决定了浏览器在应用多个 CSS 规则时的优先级。CSS 层叠机制遵循以下三个主要原则：

1. 来源（Origin）：CSS 规则的来源会影响其应用的优先级。
2. 优先级（Specificity）：选择器的特异性决定了规则的权重。
3. 顺序（Order）：相同优先级的规则，后定义的会覆盖先定义的。

---

1. CSS 规则的来源

CSS 规则可以来自不同的来源，按优先级由低到高排列如下：

1. 用户代理（User Agent）样式表

   • 也就是浏览器的默认样式，如 <h1> 默认比 <p> 更大。

2. 用户自定义样式（用户设置的样式，如某些浏览器支持的高对比度模式）

3. 作者样式（Author styles）（开发者定义的 CSS 规则）

   • 这包括 link 引入的外部 CSS、<style> 内部 CSS 以及 style 内联样式。

4. !important 规则

   • 带有 !important 标记的样式比其他规则更优先，即使它的特异性较低。
   • 但 !important 在不同来源之间仍然遵循层叠规则（例如用户 !important 样式比作者 !important 样式优先）。

示例：

/* 低优先级：浏览器默认样式 */
h1 {
    font-size: 32px;
}

/* 中等优先级：外部 CSS */
h1 {
    font-size: 40px;
}

/* 高优先级：内联样式 */
<h1 style="font-size: 50px;">Hello</h1>

/* 最高优先级：!important */
h1 {
    font-size: 60px !important;
}

最终 h1 的字体大小是 60px，因为 !important 规则最高。

---

2. CSS 选择器的优先级（Specificity）

当多个 CSS 规则作用于同一个元素时，浏览器会根据 特异性 计算优先级。
特异性计算规则：

• 内联样式 (style="...") → 1000
• ID 选择器 (#id) → 100
• 类、属性选择器、伪类 (.class, [attr], :hover) → 10
• 元素、伪元素选择器 (div, h1, p, ::before) → 1
• 通配选择器 (*)、组合选择器（>、+、~）、伪元素 (::before) 不会增加特异性

示例：

/* 特异性值 = 1 */
h1 {
    color: blue;
}

/* 特异性值 = 10 */
.class-name {
    color: red;
}

/* 特异性值 = 100 */
#id-name {
    color: green;
}

/* 特异性值 = 1000 */
<h1 id="id-name" class="class-name" style="color: yellow;">Hello</h1>

最终 h1 的颜色为 黄色，因为内联样式的特异性最高 (1000)。

特异性计算示例

/* 1 */
p {
    color: black;
}

/* 10 */
.text {
    color: red;
}

/* 10 + 1 = 11 */
p.text {
    color: blue;
}

/* 100 */
#main {
    color: green;
}

/* 100 + 10 + 1 = 111 */
#main p.text {
    color: orange;
}

/* 1000 */
<p id="main" class="text" style="color: purple;">Hello</p>

最终 p 的颜色为 紫色，因为 style="color: purple;" 的特异性最高。

---

3. CSS 规则的顺序（Order）

如果多个选择器的特异性相同，CSS 会根据它们的定义顺序来决定应用哪一条规则：

1. 先定义的规则会被后定义的规则覆盖（在相同特异性的情况下）。
2. CSS 按从上到下执行，后定义的规则优先。

示例：

p {
    color: red;
}

p {
    color: blue;
}

最终 p 的颜色是 蓝色，因为后面的规则覆盖了前面的。

但如果前面的规则有更高的特异性，则不会被覆盖：

p {
    color: red !important;
}

p {
    color: blue;
}

最终 p 还是 红色，因为 !important 具有更高的优先级。

---

4. !important 规则

!important 可以提高 CSS 规则的优先级，使其凌驾于其他规则之上。
优先级顺序（从低到高）：

1. 浏览器默认样式
2. 外部/内部 CSS 规则
3. 内联样式 (style="")
4. !important 规则（最高）

示例：

p {
    color: blue !important;
}

p {
    color: red;
}

最终 p 的颜色是 蓝色，因为 !important 具有最高优先级。

⚠️ 注意：

• 滥用 !important 可能会导致样式难以维护，最好只在特殊情况下使用（例如覆盖第三方库的样式）。
• 用户自定义的 !important 样式比开发者的 !important 样式优先。

---

5. 继承（Inheritance）

继承是 CSS 的另一层优先级机制：

1. 可继承属性（如 color, font-family）：子元素会继承父元素的属性。
2. 不可继承属性（如 margin, padding, border）：默认不会继承。

示例：

body {
    color: blue;
}

那么所有 p、h1、span 等文本元素都会继承 color: blue;。

如果某个属性不会继承，但你希望它继承，可以使用：

p {
    color: inherit;
}

或者强制继承：

all: inherit;

相反，若你不希望继承某个值：

p {
    color: initial;
}

---

总结

CSS 层叠机制的核心规则

1. 优先级：
   • !important > 内联样式 > ID 选择器 > 类/属性/伪类选择器 > 元素选择器 > 通配符
2. 特异性：
   • 计算不同选择器的权重，特异性高的优先。
3. 顺序：
   • 相同特异性下，后定义的规则优先。
4. 继承：
   • 只有部分属性会自动继承，inherit 可强制继承。

CSS 的继承（Inheritance）详细解析

1. 什么是继承？

继承（Inheritance）是 CSS 的一种机制，使某些 CSS 属性可以自动从父元素传递到子元素，而无需显式声明。这样可以减少冗余代码，提高代码的可维护性。

---

2. 可继承与不可继承的属性

并非所有的 CSS 属性都可以被继承。CSS 继承的规则如下：

✅ 可继承的属性（主要是文本和字体相关属性）

以下属性通常会自动从父元素继承到子元素：

• 字体：
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
• 文本相关：
  • letter-spacing
  • word-spacing
  • visibility
  • direction
  • cursor
  • color
  • line-height
  • quotes

示例：

body {
    color: blue;
    font-family: Arial, sans-serif;
}

p {
    font-size: 16px;
}

子元素 <p> 会继承 body 的 color 和 font-family，但不会继承 font-size，除非显式定义。

---

❌ 不可继承的属性（主要是盒模型和布局相关）

CSS 默认不会继承与盒子模型、布局、边距、背景等相关的属性，比如：

• 盒子模型（Box Model）
  • width
  • height
  • margin
  • padding
  • border
• 布局（Layout）
  • display
  • position
  • top / left / right / bottom
  • z-index
  • overflow
• 背景（Background）
  • background
  • background-color
  • background-image
• 其他
  • box-shadow
  • transform
  • opacity
  • visibility
  • float
  • clear

示例（不可继承的属性）：

body {
    background-color: lightgray;
    margin: 20px;
}

p {
    background-color: white; /* 不会继承，需要手动指定 */
}

在此例中，background-color 和 margin 不会从 body 继承到 p，因此 p 需要手动指定背景色。

---

3. 强制继承与取消继承

虽然有些属性默认不会继承，但我们可以使用 inherit 强制继承，或者用 initial 还原默认值。

inherit - 强制继承

无论 CSS 规则是否默认可继承，我们都可以使用 inherit 让属性继承自父元素。

示例：

p {
    background-color: inherit; /* 让 p 继承父元素的背景色 */
    width: inherit; /* 让 p 继承父元素的宽度 */
}

initial - 还原默认值

如果想让某个属性恢复为其 CSS 规范中的默认值，可以使用 initial。

示例：

p {
    color: initial; /* 让 p 的颜色恢复到浏览器默认（通常是黑色） */
    width: initial; /* 让 p 的宽度恢复到默认值（auto） */
}

unset - 继承或重置

• 对于 可继承的属性（如 color），unset 等同于 inherit。
• 对于 不可继承的属性（如 margin），unset 等同于 initial。

示例：

p {
    color: unset;  /* 等同于 inherit */
    margin: unset; /* 等同于 initial */
}

---

4. 继承的应用场景

1. 全局继承字体

为了统一字体，可以在 body 里定义 font-family，所有文本元素都会继承：

body {
    font-family: "Arial", sans-serif;
}

2. 让不可继承属性继承

如果希望 background-color 继承，可以这样写：

p {
    background-color: inherit;
}

3. 清除继承的样式

如果一个子元素不想继承某些样式，可以使用 initial：

span {
    color: initial;
}

---

5. 继承 VS 层叠

继承和 CSS 层叠（Cascading）是不同的概念：

• 继承 适用于文本类属性，父元素的样式会影响子元素。
• 层叠 指的是当多个规则应用到同一元素时，遵循特异性和优先级规则决定最终样式。

示例（层叠 vs 继承）

body {
    color: red;
}

p {
    color: blue;
}

这里 p 继承 body 的 color 规则，但由于 p 另有 color: blue;，最终 p 的颜色是蓝色（层叠优先）。

---

6. 继承的局限性

• 继承只适用于 文本相关 的属性，布局、边距、背景等都不会继承。
• inherit 并不一定适用于所有情况，尤其是在嵌套复杂的布局中，容易导致意外的样式问题。

---

7. 总结

规则	适用范围	作用
默认继承	仅适用于文本相关属性	字体、颜色等会自动继承
inherit	所有属性	强制继承父元素的值
initial	所有属性	还原 CSS 默认值
unset	继承属性：inherit 非继承属性：initial	适用于不同情况

示例：

body {
    color: blue;
    background-color: lightgray;
}

p {
    color: inherit; /* 继承父元素 color: blue */
    background-color: initial; /* 还原浏览器默认背景 */
}

结论

• 继承简化了 CSS 代码，提高了可维护性，但不适用于所有属性。
• inherit 可以让不可继承的属性继承，initial 让属性回归默认，unset 结合了两者。
• 继承与层叠机制结合使用，能更好地控制页面样式。