层叠与继承

CSS 核心机制：层叠解决冲突，继承实现样式传递。

层叠规则

当多个样式作用于同一元素时，按以下顺序决定生效样式：

1. 来源与重要性
2. 优先级（Specificity）
3. 源码顺序

来源优先级

源码顺序

优先级相同时，后声明的样式生效：

.text { color: red; }
.text { color: blue; }  /* 生效 */

继承机制

可继承属性

子元素自动继承父元素的以下属性：

/* 文字属性 */
color, font-size, font-family, font-weight, line-height, text-align

/* 列表属性 */
list-style

/* 表格属性 */
border-collapse, border-spacing

不可继承属性

以下属性不继承：

/* 盒模型 */
width, height, margin, padding, border

/* 布局 */
display, position, float, clear

/* 其他 */
background, overflow, z-index

强制继承

.child {
  inherit: all;  /* 继承所有可继承属性 */
}

/* 或单独继承 */
.child {
  color: inherit;
  font-size: inherit;
}

控制继承的关键字

.box {
  color: inherit;   /* 继承父元素颜色 */
  margin: initial;  /* 重置为初始值 */
  padding: unset;   /* 自然行为 */
}

实际应用

重置样式

/* 使用 unset 重置 */
button {
  all: unset;  /* 清除所有样式 */
}

保持一致性

/* 文字颜色自动继承 */
body {
  color: #333;
}

/* 所有子元素自动继承 color */
p, span, a, li {
  /* 无需重复设置 color */
}

避免意外继承

.parent {
  font-size: 20px;
}

.child {
  font-size: 16px;  /* 显式覆盖 */
}

要点总结

• 层叠顺序：来源重要性 > 优先级 > 源码顺序
• 可继承属性：文字、列表、表格属性
• 不可继承属性：盒模型、布局、背景
• 使用 inherit/initial/unset 控制继承行为
• all: unset 可快速重置元素样式