css :hover 样式失效的根本原因
学习前端开发过程中，常常会遇到 :hover 样式失效的情况。例如，以下代码：
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">你好</a>
a {
text-decoration: none;
}
a:hover {
color: coral;
}鼠标悬停在 标签上时，颜色并没有变为珊瑚色。这是为什么呢？
CSS 选择器优先级与权重
问题在于 CSS 选择器的优先级机制。当多个选择器作用于同一个元素时，优先级高的选择器会覆盖优先级低的选择器。
立即学习“前端免费学习笔记（深入）”；
在本例中，a 选择器和 a:hover 选择器都作用于 元素。虽然 a:hover 只有在鼠标悬停时才生效，但 a 选择器由于在样式表中先出现，且优先级更高，导致其样式覆盖了 a:hover 的样式。
选择器权重的计算
CSS 选择器优先级由一个权重系统决定，通常用四位数字表示 (a, b, c, d)，其中：
本例中选择器的权重
当鼠标未悬停时，a:hover 的权重低于 a，所以失效。即使鼠标悬停，a:hover 的权重与 a 相同，但由于 a 在样式表中先出现，所以依然被 a 覆盖。
为了使 a:hover 生效，可以调整样式表的顺序，将 a:hover 放在 a 之后，或者使用更具体的或权重更高的选择器来定义 a:hover 样式。
以上就是CSS中:hover样式失效的原因是什么？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1002
收藏
