css - :links for a specific element apply the whole page links

Question

我的 CSS/HTML5 代码有问题。正如标题所说，当我为特定元素 (div) 提供 a:link 时，它会将整个页面的链接更改为这些设置(颜色)。

现在，我以前从未见过这个问题。我仔细检查了我的语法链接，但它似乎是正确的。我尝试删除缓存，然后按 Shift+F5 刷新。还在 Edge 和 FireFox 上尝试过。

ul a:link, a:visited, a:active {
    color: #e20000;
    text-decoration: none;
}

a:link, a:visited, a:active {
    color: #fff;
    text-decoration: none;
}

现在，我需要它保持在我设置的元素的限制内。

什么可能导致该问题？提前谢谢你。

Answer 1

逗号分隔应用了相同规则的多个选择器。规则开头的 ul 是第一个选择器 (ul a:link) 的一部分，不会影响已访问和事件状态。

ul a:link, a:visited, a:active {
    color: #e20000;
    text-decoration: none;
}

将 ul 添加到所有这些:

ul a:link, ul a:visited, ul a:active {
    color: #e20000;
    text-decoration: none;
}

(实验):is规则(以前称为 :any 或 :matches)可以在一个公分母下包含多个规则。不幸的是，此功能仍然缺乏支持，并且存在错误。

ul :is(a:link, a:visited, a:active) {
    color: #e20000;
    text-decoration: none;
}

例子:

div :is(a:link, a:visited, a:active) {
  color: #e20000;
  text-decoration: none;
}

/** needed for browsers' compatibility **/
div :-webkit-any(a:link, a:visited, a:active) {
  color: red;
  cursor: pointer;
}

div :-moz-any(a:link, a:visited, a:active) {
  color: red;
  cursor: pointer;
}

:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

<a href="#">Not effected</a>

<div>
  <a href="#">Effected</a>
</div>