css a:hover 样式失效的优先级问题
在前端开发中，经常会遇到 a:hover 样式失效的情况。本文将分析一个案例，解释为何将 a:hover 样式移动到子选择器之后，样式就能生效。这并非简单的选择器层叠问题，而是 CSS 选择器优先级计算的体现。
CSS 选择器权重
CSS 选择器的优先级由权重决定。权重计算规则基于四个值：
案例分析
假设存在以下 CSS 代码：
.nav a { /* 样式 A */ }
a:hover { /* 样式 B */ }
-
.nav a的权重为 10 + 1 = 11 (类选择器 + 元素选择器)。 -
a:hover的权重为 10 (伪类选择器)。 (未激活时) 激活时，权重取决于上下文，可能与.nav a相同或更高。
当鼠标悬停在 <a></a> 元素上时，浏览器需要决定应用哪个样式。如果 .nav a 已经应用于该元素，并且其权重高于 a:hover，那么 a:hover 样式将被覆盖。
将 a:hover 放在 .nav a 之后，并不能改变其本身的权重，而是利用了 CSS 的层叠规则：当权重相同时，后出现的样式会覆盖先出现的样式。 因此，如果 a:hover 的权重与 .nav a 相同或更高，则后定义的 a:hover 样式会生效。 更可靠的解决方法是提高 a:hover 的权重，例如使用更具体的类选择器或ID选择器。
总结
a:hover 样式失效并非总是因为层叠，也可能是因为选择器权重计算导致的优先级问题。理解 CSS 选择器权重计算规则，有助于我们更好地解决样式冲突问题。 通过分析选择器的权重，并根据需要调整选择器或使用 !important (不推荐过度使用) 可以有效避免此类问题。
