为什么 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中文网其他相关文章！
