如何提升a:focus-visible伪选择器优先级，覆盖全局锚点样式？

核心解决方案 #

通过给a:focus-visible选择器叠加特异性提升技巧，确保它能覆盖所有现有及未来新增的类似#container > a的高特异性规则：

a:focus-visible:not(#fake-id) {
    color: red !important;
}

原理说明 #

• 原有规则#container > a的特异性计算为：ID选择器（100）+元素选择器（1）=101，即使都使用!important，特异性更高的规则会优先生效。
• 新增的a:focus-visible:not(#fake-id)选择器，利用CSS规范中:not()伪类会继承内部选择器特异性的特性，将总特异性提升为：元素选择器（1）+伪类选择器（10）+ID选择器（100）=111，超过了原有规则的101。
• #fake-id不需要在页面中实际存在，仅用于提升特异性，不会影响任何元素的匹配。

修改后的完整代码 #

CSS

#container > a {
    color: yellow !important;
}

/* 确保:focus-visible样式优先级更高 */
a:focus-visible:not(#fake-id) {
    color: red !important;
}

HTML

<div id="container">
    <a href="#">Anchor 1</a>
    <a href="#">Anchor 2</a>
</div>

额外说明 #

这种方案无需针对页面中所有已存在或未来新增的ID容器逐一适配，只要保持:not()内部是一个不存在的ID选择器，就能稳定让:focus-visible状态的样式优先于所有类似#xxx > a的高特异性规则。

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