CSS 全局关键字：inherit、initial、unset、revert 的深入解析
2023-09-11 21:52:25
理解 CSS 全局掌控元素样式
作为一名前端开发人员，掌握 CSS 的核心概念至关重要，其中包括深入了解全局属性值，如 inherit、initial、unset 和 revert。这些在控制元素外观方面发挥着关键作用，因此熟悉它们的使用对于编写健壮且可维护的代码至关重要。
继承：与父元素保持一致
inherit 关键字允许元素从其父元素继承属性值。换句话说，子元素将拥有与父元素相同的样式，除非子元素明确覆盖这些样式。
用途：
- 保持子元素与父元素的一致性。例如，可以通过 inherit 继承字体大小：
p {
font-size: inherit;
}
- 节省编写 CSS 代码的时间，无需为子元素重复声明属性值。
初始值：恢复默认设置
initial 关键字将属性重置为其初始值，就好像该属性从未被设置过一样。浏览器为不同属性定义了默认初始值：
| 属性 | 初始值 |
|---|---|
| color | #000000 |
| font-size | 16px |
| background-color | transparent |
| display | block |
用途：
- 重置元素的样式，恢复到其默认状态。例如，可以使用 initial 重置元素的所有自定义样式：
#my-element {
all: initial;
}
- 恢复元素的默认行为。例如，可以使用 initial 恢复元素的可单击状态：
a {
cursor: initial;
}
未设置：移除继承
unset 关键字类似于 initial，但它除了重置属性为其初始值外，还会删除该属性的所有自定义继承。换句话说，unset 将属性恢复到未设置状态，就像从未声明过一样。
用途：
- 移除继承的属性值。例如，可以使用 unset 使元素的字体大小不受父元素影响：
p {
font-size: unset;
}
- 重置自定义样式，同时保留继承样式。例如，可以使用 unset 将元素的背景色设置为透明，但不影响父元素的背景色：
#my-element {
background-color: unset;
}
恢复：尊重继承
revert 关键字是 CSS3 中引入的，将属性重置为其指定的初始值。与 initial 不同，revert 考虑了自定义继承。
用途：
- 重置属性，同时尊重继承样式。例如，可以使用 revert 将元素的字体大小设置为其父元素的 1.2 倍：
p {
font-size: revert 1.2rem;
}
- 覆盖默认值。例如，可以使用 revert 将元素的字体颜色设置为蓝色，无论其父元素的字体颜色如何：
p {
color: revert #0000ff;
}
总结
inherit、initial、unset 和 revert 是 CSS 中用于控制元素样式的强大全局关键字。理解这些关键字的含义和用途對於编写健壯且可維護的代碼至關重要。
| 關鍵字 | 用途 |
|---|---|
| inherit | 從父元素繼承屬性值 |
| initial | 將屬性重置為其初始值 |
| unset | 將屬性重置為未設定狀態，移除繼承 |
| revert | 將屬性重置為其指定的初始值，考慮繼承 |
通過有效使用這些關鍵字，您可以更有效地控制元素的樣式，並建立更一致、更易於維護的 CSS 代碼。
常見問題解答
- inherit 和 initial 有什麼區別？
initial 將屬性重置為其初始值，而 inherit 從父元素繼承屬性值。
- 為什麼使用 unset 而不是 initial？
unset 不僅重置屬性，還會移除所有繼承的樣式，而 initial 則會保留繼承的樣式。
- revert 與其他關鍵字有何不同？
revert 會考慮繼承的樣式，而其他關鍵字不會。
- 如何在 CSS 中使用這些關鍵字？
這些關鍵字可以像這樣應用於元素的樣式中：
element {
property: inherit;
property: initial;
property: unset;
property: revert;
}
- 這些關鍵字可以一起使用嗎？
是的，這些關鍵字可以組合使用以實現更複雜的樣式效果。
