css :hover 样式失效的根本原因
学习前端开发过程中，常常会遇到 :hover 样式失效的情况。例如，以下代码：
a { text-decoration: none;}a:hover { color: coral;}
鼠标悬停在 标签上时，颜色并没有变为珊瑚色。这是为什么呢？
CSS 选择器优先级与权重
问题在于 CSS 选择器的优先级机制。当多个选择器作用于同一个元素时，优先级高的选择器会覆盖优先级低的选择器。
立即学习“前端免费学习笔记（深入）”；
在本例中，a 选择器和 a:hover 选择器都作用于 元素。虽然 a:hover 只有在鼠标悬停时才生效，但 a 选择器由于在样式表中先出现，且优先级更高，导致其样式覆盖了 a:hover 的样式。
选择器权重的计算
CSS 选择器优先级由一个权重系统决定，通常用四位数字表示 (a, b, c, d)，其中：
a: id 选择器个数b: 类选择器、属性选择器和伪类选择器个数c: 元素选择器和伪元素选择器个数d: 行内样式权重（最高）
本例中选择器的权重
a 选择器：权重为 (0, 0, 1, 0)a:hover 选择器（鼠标未悬停）：权重为 (0, 0, 0, 0)a:hover 选择器（鼠标悬停）：权重为 (0, 0, 1, 0) (因为此时a元素被选中)
当鼠标未悬停时，a:hover 的权重低于 a，所以失效。即使鼠标悬停，a:hover 的权重与 a 相同，但由于 a 在样式表中先出现，所以依然被 a 覆盖。
为了使 a:hover 生效，可以调整样式表的顺序，将 a:hover 放在 a 之后，或者使用更具体的或权重更高的选择器来定义 a:hover 样式。
以上就是CSS中:hover样式失效的原因是什么？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1560842.html
微信扫一扫 
支付宝扫一扫 
