为什么 CSS 特异性中的 `.foo a:link` 会覆盖 `a:hover` ？

CSS 选择器特异性难题：为什么 .foo a:link 会覆盖 a:hover

在 CSS 领域，选择器特异性可能有点令人费解。让我们深入研究一个有趣的谜题，它演示了 .foo a:link 选择器如何覆盖更具体的 a:hover 和 a:active 选择器。

问题定义

考虑以下代码：

<div class="foo">
    <a href="#">Example</a>
</div>

a:link, a:visited {
    color: blue;
}

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

.foo a:link, .foo a:visited {
    color: green;
}

预期将鼠标悬停在链接上应将其变为红色，但实际上，它仍保持绿色。这种令人费解的行为需要仔细检查 CSS 级联。

CSS 的特异性

特异性决定了 CSS 规则应用于元素的顺序。较高的特异性胜过较低的特异性。以下公式计算特异性：

• 内联样式：1, 0, 0, 0
• ID 选择器：0, 1, 0, 0
• 类选择器： 0, 0, 1, 0
• 伪类和伪元素：0, 0, 0, 1

拼图中的选择器特异性

计算选择器的特异性：

• a:link , a:已访问, a:悬停, a:活动: 0, 0, 1, 1
• .foo a:link, .foo a:visited: 0, 0, 2, 1

如您所见，.foo a:link 和 .foo a :visited 选择器比 a:hover 和 a:active 选择器具有更高的特异性 (2 > > 1).

结论

令人惊讶的行为的原因是 .foo a:link 和 .foo a:visited 选择器比 a:hover 和 a:active 具有更高的特异性选择器。这意味着即使 a:hover 和 a:active 在伪类方面更具体，.foo 选择器的类特异性胜出。

要纠正此问题，请使用问题中建议的修复（取消注释 .foo a:hover 和 .foo a:active 规则）是必要的。通过添加与 .foo a:link 和 .foo a:visited 规则具有相同特异性的这些规则，a:hover 和 a:active 样式现在将优先。

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