如何更改伪选择器的优先级

Question

CSS：

#container > a {
    color: yellow!important;
}
a:focus-visible {
    color: red!important;
}

HTML：

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

我们都知道，当我们关注锚点时，文本颜色仍然是黄色，因为第一个选择器更具体。这很奇怪，我认为这是一个错误，因为 :focus-visible （以及其他伪选择器，如 :hover）是一种不同的状态，就像单击事件一样。对我来说，这就像当我单击一个元素时调用 onchange 处理程序。无论如何，这是完全不同的话题来讨论。

我的问题是，如何使“a:focus-visible”选择器具有高优先级？ #container > a:focus-visible 可能是正确的答案。但是，考虑一下我的页面中有很多案例，我的用户仍然可以像第一个一样添加选择器。我需要在所有锚点上推行我自己的规则。

Answer 1

您可以通过将选择器修改为比 #container > a 更具体来增加 :focus-visible 规则的特异性。由于 #container > a 具有更高的特异性，因此向 a:focus-visible 添加 ID 或另一个选择器可以确保其优先：

CSS：

#container > a:focus-visible {
    color: red !important;
}

这确保了当锚点处于 :focus-visible 状态时，红色将覆盖 #container > a 中的黄色。