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

特异性难题：为什么 .foo 选择器会否决 a:hover、a:active

CSS 特异性决定了如何根据选择器应用样式重量。在给定的问题中，.foo a 选择器与 a:hover 和 a:active 冲突。

理解特异性

特异性由标签、类的数量决定，以及选择器中的 ID，每个级别都有特定的权重。在这种情况下，提供的特异性表显示 .foo a:link 和 .foo a:visited 比 a:hover 和 a:active (0 0 1 1) 具有更高的特异性 (0 0 2 1)。

为什么 .foo a 会被覆盖

.foo a 选择器比 a:hover 更具体和 a:active 因为它适用于具有 foo 类的元素内的链接。当一个元素遇到具有相同特性的多个选择器时，将应用最后声明的样式。

更正 .foo 选择器

以允许 a:hover 和 a:要优先使用活动样式，必须修改 .foo a 选择器以具有较低的特异性。一种可能的修复方法是：

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

通过在悬停和活动伪类之前添加 .foo，特异性仍然高于 a:hover 和 a:active，确保这些伪类的样式是应用于具有 foo 类的元素内。

外卖

特异性决定如何应用 CSS 样式。理解这个概念对于控制风格优先级和实现所需的视觉效果至关重要。

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