CSS initial/inherit/unset/revert 关键字
CSS全局关键字：initial重置为初始值、inherit继承父元素值、unset(继承属性=inherit/非继承=initial)、revert回退到浏览器默认样式、all:unset;一次性重置所有属性 · 难度：入门 · +10XP
CSS 关键字 —— initial、inherit、unset、revert 的区别
CSS有四个看起来很相似的关键字，但它们的行为完全不同。搞清楚了这四个关键字，就能精准地重置任何CSS属性。
一张表看懂
| 关键字 | 行为 | 示例 |
|---|---|---|
| initial | 重置为CSS规范的初始值 | color:initial → 变回黑色 |
| inherit | 继承父元素的值 | color:inherit → 用父元素的文字颜色 |
| unset | 继承属性=inherit，非继承属性=initial | 最聪明的选择 |
| revert | 回退到浏览器默认样式 | display:revert → 恢复元素的默认display |
一次性重置所有属性
.reset-all {
all: unset; /* 重置所有CSS属性 */
}动手练习
- 基础练习：给一个div设置color:red，然后在子元素上分别测试initial、inherit、unset、revert的效果。
- 进阶应用：用all:unset重置一个从第三方库引入的组件样式，然后重新写自己的样式。
- 项目实战：用revert恢复被你的CSS覆盖的浏览器默认focus样式。