CSS :hover 伪类失效的原因分析
在前端开发中，我们经常会遇到 :hover 伪类失效的情况。本文将通过一个示例代码，深入探讨其原因，特别是与 CSS 选择器优先级和层叠顺序的关系。
示例代码及问题:
以下代码中，a:hover 样式并未生效：
立即学习“前端免费学习笔记（深入）”；
a {
text-decoration: none;
}
a:hover {
color: coral;
}
.nav2 a {
color: #b0b0b0;
}
将 a:hover 放在 .nav2 a 之后，则 a:hover 生效。这并非简单的选择器优先级问题，因为这里只有一个选择器作用于 a 元素。
理解选择器优先级和层叠
CSS 选择器优先级由权重决定，权重计算方式如下：
- 内联样式: 权重最高 (1000)
-
!important声明: 权重次之 (1000) - ID 选择器: 权重为 100
- 类选择器、属性选择器、伪类选择器: 权重为 10
- 元素选择器、伪元素选择器: 权重为 1
权重计算结果通常用四个数字表示，分别对应内联样式、!important、ID 选择器和类/属性/伪类选择器权重。
在示例中：
-
a:hover的权重为 (0, 0, 0, 10) (伪类选择器) -
.nav2 a的权重为 (0, 0, 0, 11) (元素选择器 + 类选择器)
当 a:hover 位于 .nav2 a 之前时，浏览器会先应用 .nav2 a 的样式，因为其权重更高。 a:hover 虽然也匹配，但由于 .nav2 a 的样式已经应用，所以 a:hover 的样式被覆盖。
将 a:hover 放在 .nav2 a 之后，则 a:hover 的权重在当前作用域内仍然是 (0, 0, 0, 10)，但由于它是最后被解析的样式，且它也匹配被激活的元素，因此它的样式生效，覆盖了 .nav2 a 的样式。 这体现了 CSS 的层叠性(Cascade)原理。
总结:
a:hover 失效并非仅仅是优先级问题，更重要的是 CSS 的层叠顺序。 后定义的、权重相同或更高的选择器会覆盖先定义的选择器的样式。 理解选择器权重和层叠顺序对于解决 CSS 样式冲突至关重要。 为了避免此类问题，建议保持 CSS 代码的清晰性和组织性，并使用更具体的、权重更高的选择器来覆盖通用选择器。
