为什么类和伪类 CSS 选择器在悬停时会覆盖仅伪类选择器？

为什么具有较高特异性的 CSS 选择器会覆盖其他选择器：悬停时链接外观的情况

简介

在 CSS 中，当多个选择器应用于同一个元素时，具有最高值的选择器特异性优先。这个原则在下面的示例中很明显，其中同时使用类和伪类的选择器 (.foo a:link) 会覆盖其他仅使用伪类的选择器（例如 a:hover）。

了解特异性

要确定哪个选择器具有最高的特异性，请考虑以下因素指标：

• 内联样式具有最高的特异性 (1)
• Id 选择器比类、元素或通用选择器具有更高的特异性 (0)
• 类，元素或通用选择器具有相同的特异性 (1)

解释示例

在给定的 HTML 和 CSS 代码中，以下选择器应用于 .foo div 内的链接元素：

• .foo a:link, .foo a:visited（较高特异性：类和伪类）
• a:link, a:visited（较低特异性：仅伪类）
• a:hover, a:active（与 .foo a:link 相同的特异性）

根据提供的特异性表，.foo a:link 覆盖 a :hover 因为前者由于包含类而具有更高的优先级。

修复问题

要纠正该问题并使悬停链接显示为红色，需要修改 .foo a:link 选择器以确保它不会覆盖 a:hover 中定义的样式。一种可能的修复方法是为 .foo 上下文中的悬停添加一个更具体的选择器：

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

通过引入更具体的选择器，它优先于不太具体的 .foo a:link 选择器，从而允许悬停行为以显示正确的颜色。

以上是为什么类和伪类 CSS 选择器在悬停时会覆盖仅伪类选择器？的详细内容。更多信息请关注PHP中文网其他相关文章！