CSS继承机制下各类链接颜色的表现原理咨询

云上老周

2026-7-2

CSS继承属性对链接颜色的影响解析

示例代码

CSS

body {
  color: green;
}

.my-class-1 a {
  color: inherit;
}

.my-class-2 a {
  color: initial;
}

.my-class-3 a {
  color: unset;
}

HTML

<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
  <li class="my-class-2">Reset the <a href="#">link</a> color</li>
  <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

运行结果

结果截图

逐个拆解行为

默认链接颜色
浏览器自带的UA样式表给<a>标签设置了默认蓝色（带下划线），且<a>的color属性默认不继承父元素样式。所以即便body设置了绿色，这个链接仍保持浏览器默认的蓝色。
inherit（继承）
给.my-class-1 a设置color: inherit，强制<a>继承父元素（此处为<li>，而<li>继承了body的绿色）的颜色值，因此这个链接显示为绿色。
initial（初始值）
initial表示使用CSS规范定义的属性初始值，color的初始值为黑色。该值会完全忽略继承和自定义样式，所以这个链接变为黑色，和浏览器对<a>的默认样式无关。
unset（取消设置）
unset是“智能”属性值：如果目标属性是可继承属性（比如color），它的效果等同于inherit；如果是不可继承属性，则等同于initial。由于color属于可继承属性，.my-class-3 a的color: unset和inherit效果一致，链接显示为绿色。