为什么我的 `.foo a:link` 和 `.foo a:visited` CSS 会覆盖 `a:hover` 和 `a:active`？

为什么 CSS 中 .foo a:link、.foo a:visited 选择器会覆盖 a:hover、a:active 选择器？

问题中描述的意外行为源于 CSS 的特殊性规则。特异性决定了当多个规则应用于同一元素时 CSS 规则的优先级。

特异性表：

Selector	Specificity
a:link	0-0-1-1
a:visited	0-0-1-1
a:hover	0-0-1-1
a:active	0-0-1-1
.foo a:link	0-0-2-1
.foo a:visited	0-0-2-1

如您所见，.foo a:link由于附加的类选择器，.foo a:visited 的特异性比 a:hover 和 a:active 稍高.foo.

特异性覆盖如何工作：

当具有不同特异性的多个规则应用于同一元素时，具有较高特异性的规则优先。在这种情况下， .foo a:link 和 .foo a:visited 比 a:hover 和 a:active 具有更高的特异性，因此它们的样式会覆盖后者的样式。

更正行为：

为了防止 .foo a:link、.foo a:visited 选择器覆盖 a:hover、a:active，您可以增加后者的特异性。这可以通过向悬停/活动规则添加子选择器来实现：

.foo a:hover, .foo a:active {
  color: red;
}

通过添加 .foo 类作为子选择器，悬停/活动规则的特异性增加到 0-0- 3-1，高于 .foo a:link 和 .foo a:visited。因此，当两个伪类都适用时，悬停/活动样式将优先于链接/访问样式并生效。

以上是为什么我的 `.foo a:link` 和 `.foo a:visited` CSS 会覆盖 `a:hover` 和 `a:active`？的详细内容。更多信息请关注PHP中文网其他相关文章！