CSS优先级冲突下，如何阻止链接hover/focus状态变色？

问题背景 #

第三方CSS库定义了基础链接样式：

<a href="...">Link</a>

a {
    color: #f00;
}

a:hover,
a:focus {
    color: #c00;
}

当把链接放入.thing容器并自定义常态颜色后：

<div class="thing">
    <a href="...">Another link</a>
</div>

.thing a {
    color: #0f0;
}

发现库自带的hover/focus变色样式依然生效，尝试unset/revert/currentColor均未解决，且无法修改库源码、不知道链接最终的常态颜色，需要让.thing内的链接在hover/focus时保持常态颜色。

可行解决方案 #

方案1：提升选择器优先级，用currentColor复用常态颜色

currentColor会读取当前元素的常态文本颜色，只要我们的选择器优先级高于库的样式，就能强制hover/focus时沿用常态颜色：

.thing a:hover,
.thing a:focus {
  color: currentColor;
}

如果库的样式用了!important，就需要在我们的规则里也加上!important（尽量少用，但特殊场景下是必要的）：

.thing a:hover,
.thing a:focus {
  color: currentColor !important;
}

方案2：进一步提升选择器权重

如果上述方案仍不生效，说明库的选择器优先级更高，可以通过叠加父元素选择器来提升权重，比如：

body .thing a:hover,
body .thing a:focus {
  color: currentColor;
}

这种写法的优先级远高于库的a:hover，能确保覆盖原有样式。

方案3：用CSS变量存储常态颜色

先把链接的常态颜色存入变量，再在hover/focus状态下调用这个变量，适合需要复用颜色的场景：

.thing a {
  --normal-link-color: currentColor;
}

.thing a:hover,
.thing a:focus {
  color: var(--normal-link-color);
}

原理说明 #

库的a:hover是元素选择器（权重：0,0,1,0），而我们的.thing a:hover是类+元素选择器（权重：0,0,1,1），优先级更高，只要规则正确就能覆盖原有样式。currentColor是关键，它能自动读取当前元素已经生效的常态颜色，不用硬写具体色值，完美适配“不知道链接实际颜色”的场景。

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