CSS中:hover伪类失效的真正原因是什么？-css教程-PHP中文网

CSS中:hover伪类失效的真正原因是什么？

花韻仙語

发布： 2025-02-22 11:06:01

原创

389人浏览过

css中:hover伪类失效的真正原因是什么？

CSS :hover 伪类失效的陷阱：优先级与元素状态

在编写CSS样式时，我们经常会遇到:hover伪类失效的情况。这并非总是由于选择器优先级冲突导致的，而是与元素状态和CSS加载顺序密切相关。

让我们来看一个例子：

<div class="nav">
  <div class="nav1">
    <div class="nav2">
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">你好</a>
    </div>
  </div>
</div>

登录后复制

a {
  text-decoration: none;
}

.nav2 a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bb0b0b0;
}

a:hover {
  color: coral;
}

登录后复制

在这个例子中，a:hover 样式可能不起作用。原因并非简单的优先级问题（尽管优先级在复杂的CSS中至关重要），而是因为.nav2 a 样式已经设置了 a 元素的颜色。 :hover 伪类只有在元素处于悬停状态时才会生效，但它并不能覆盖已经应用于该元素的其它样式。由于 .nav2 a 样式在 a:hover 之前定义，它先被应用，导致 a:hover 的颜色更改被忽略。

立即学习“前端免费学习笔记（深入）”；

如果将 a:hover 放在 .nav2 a 之后，则 a:hover 生效。这是因为浏览器按顺序加载CSS规则，后加载的规则会覆盖先加载的规则，前提是它们作用于相同的元素和属性，且后加载规则的优先级不低于前加载规则。

关键点：

理解 CSS 优先级时，需要考虑：