CSS 全局值详解

CSS 全局值是一组特殊的 CSS 关键字，它们可以应用于任何 CSS 属性，用于重置或继承属性值。这些全局值在 CSS 重置、样式继承和样式覆盖等场景中非常有用。本文将详细介绍五个主要的 CSS 全局值：initial、inherit、unset、revert 和 revert-layer。

1. initial

将属性重置为其初始值（浏览器默认值）。

/* 重置所有属性为初始值 */
.reset-all {
  all: initial;
}

/* 重置特定属性 */
.reset-color {
  color: initial; /* 重置为黑色 */
}

.reset-font-size {
  font-size: initial; /* 重置为 medium */
}

2. inherit

强制继承父元素的属性值。

/* 强制继承父元素的颜色 */
.force-inherit {
  color: inherit;
}

/* 强制继承父元素的背景色 */
.force-bg-inherit {
  background-color: inherit;
}

3. unset

根据属性的继承性来决定行为：

• 继承属性：行为像 inherit
• 非继承属性：行为像 initial

/* 智能重置所有属性 */
.smart-reset {
  all: unset;
}

/* 智能重置特定属性 */
.smart-color {
  color: unset; /* 如果父元素有颜色则继承，否则使用初始值 */
}

4. revert

将属性的级联值回滚到当前样式来源之前的值。

/* 回滚所有样式 */
.rollback-all {
  all: revert;
}

/* 回滚特定属性 */
.rollback-color {
  color: revert;
}

CSS 样式来源详解

CSS 级联有三个主要来源，按优先级从低到高排列：

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

定义：浏览器内置的默认样式，也称为"浏览器默认样式"。

特点：

• 每个浏览器都有自己的默认样式
• 确保网页在没有自定义样式时也有基本的可读性
• 不同浏览器的默认样式可能略有差异

示例：

/* 浏览器默认样式（不可见，但实际存在） */
body {
  margin: 8px;
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
  font-weight: bold;
}

p {
  margin: 1em 0;
}

查看方式：

• 浏览器开发者工具 → Elements → Styles → User Agent Stylesheet

2. 用户样式（User Styles）

定义：用户通过浏览器设置或用户样式表添加的样式。

来源：

• 浏览器设置中的自定义样式
• 用户安装的浏览器扩展
• 用户自定义的 CSS 文件
• 浏览器的可访问性设置（如高对比度模式）

特点：

• 用户可以自定义网页的显示效果
• 通常用于提高可访问性或个性化体验
• 优先级高于用户代理样式，低于作者样式

示例：

/* 用户通过浏览器设置添加的样式 */
body {
  color: blue !important; /* 用户设置的高对比度颜色 */
  font-size: 18px !important; /* 用户设置的大字体 */
}

/* 用户安装的阅读模式扩展 */
.reading-mode {
  background-color: #f4f4f4 !important;
  font-family: "Times New Roman", serif !important;
}

设置方式：

• Chrome：设置 → 外观 → 自定义字体(chrome://settings/fonts?search=font)

3. 作者样式（Author Styles）

定义：网页开发者编写的样式，包括 <style> 标签和外部 CSS 文件。

来源：

• HTML 中的 <style> 标签
• 外部 CSS 文件（<link> 标签）
• 内联样式（style 属性）
• JavaScript 动态添加的样式

特点：

• 优先级最高（在正常级联中）
• 可以覆盖用户代理样式和用户样式
• 是网页设计的主要样式来源

示例：

<!-- 内联样式 -->
<div style="color: red;">内联样式</div>

<!-- 内部样式表 -->
<style>
  .author-style {
    color: green;
    font-size: 16px;
  }
</style>

<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

/* styles.css */
.author-style {
  color: green;
  font-size: 16px;
}

revert 在不同来源中的行为

当前样式来源	revert 的目标	实际效果
作者样式	用户样式 → 用户代理样式	回滚到用户自定义，如果没有则回滚到浏览器默认
用户样式	用户代理样式	回滚到浏览器默认样式
用户代理样式	等同于 unset	对于继承属性使用 inherit，非继承属性使用 initial

5. revert-layer

将属性回滚到上一个层叠层中定义的值。

@layer base, components;

@layer base {
  .button { color: blue; }
}

@layer components {
  .button { 
    color: revert-layer; /* 回滚到 base 层的蓝色 */
  }
}