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

CSS :hover 伪类失效的原因分析

在前端开发中，我们经常会遇到 :hover 伪类失效的情况。本文将通过一个示例代码，深入探讨其原因，特别是与 CSS 选择器优先级和层叠顺序的关系。

示例代码及问题:

以下代码中，a:hover 样式并未生效：

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

<code class="css">a {
  text-decoration: none;
}

a:hover {
  color: coral;
}

.nav2 a {
  color: #b0b0b0;
}</code>

将 a:hover 放在 .nav2 a 之后，则 a:hover 生效。这并非简单的选择器优先级问题，因为这里只有一个选择器作用于 a 元素。

理解选择器优先级和层叠

CSS 选择器优先级由权重决定，权重计算方式如下：

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

• 内联样式: 权重最高 (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 代码的清晰性和组织性，并使用更具体的、权重更高的选择器来覆盖通用选择器。

以上就是CSS中:hover伪类失效的原因是什么？的详细内容，更多请关注php中文网其它相关文章！