纯CSS中如何让元素继承更早定义的全局样式颜色？

要让ul li a继承全局a标签的样式（而非父元素ul li的颜色），且不新增类、不硬编码颜色，有两种可靠的纯CSS实现方式：

方法1：使用CSS变量统一管理链接颜色 #

通过在根元素定义变量存储全局链接色，所有需要使用该颜色的元素直接引用变量即可：

:root {
  --link-color: blue; /* 若使用Bootstrap，替换为Bootstrap内置变量--bs-link-color即可 */
}

ul li {
  color: red;
}

ul li a {
  color: var(--link-color);
}

a {
  color: var(--link-color);
}

原理：CSS变量具有全局作用域，ul li a直接调用变量即可跳过父元素的颜色继承，同时实现颜色的统一维护——后续要修改链接色（比如切换Bootstrap主题），只需修改:root里的变量值。

方法2：使用revert关键字回退到全局样式 #

revert关键字会让元素的样式回退到未被当前选择器覆盖前的状态，也就是全局a标签的自定义样式（或Bootstrap的默认链接样式），而非initial对应的CSS属性初始值：

ul li {
  color: red;
}

ul li a {
  color: revert;
}

a {
  color: blue;
}

原理：和inherit/unset不同，revert不会继承父元素样式，而是重置为该元素在全局样式表中的定义，正好匹配你的需求。注意：revert支持所有现代浏览器，不兼容IE。

如果使用Bootstrap，无需自定义变量，直接引用其内置的--bs-link-color变量即可实现和Bootstrap默认链接色同步，代码更简洁：

ul li {
  color: red;
}

ul li a {
  color: var(--bs-link-color);
}

内容的提问来源于stack exchange，提问作者Blank