深入探索 hover 优先级与继承属性
在 html 和 css 中，设置元素的样式时，会遇到优先级和继承属性的问题。本文将探讨一个看似简单的悬停效果为何不生效的问题，并揭示背后的原因和解决方案。
问题：hover 对 p 元素不生效
考虑以下代码：
立即学习“前端免费学习笔记（深入）”；
<div>
<p>mmm</p>sss
</div>p {
color: yellow;
}
div:hover {
color: red;
}当我们在浏览器中运行这段代码时，奇怪的情况出现了：悬停在 div 上时，sss 变为红色，而 mmm 仍然保持黄色，似乎 div:hover 的优先级并没有更高。理解这一现象的关键在于 继承属性 的概念。
继承属性的 role
color 属性是一个 继承属性，这意味着元素可以从其父元素继承该属性值。在这种情况下，p 元素从父元素 div 继承了 color 属性，即使 p 元素本身没有设置此属性。
当没有为 p 元素设置明确的 color 值时，它会继承父元素 div 的黄色，因此 div:hover 悬停样式可以正常生效，因为黄色可以被覆盖。
解决方法
理解了继承属性的作用后，我们可以采用以下方法解决这个问题：
p:hover {
color: red;
}div:not(:hover) p {
color: yellow;
}
div:hover {
color: red;
}<p>mmm</p> <div>sss</div>
p {
color: yellow;
}
div:hover {
color: red;
}以上就是为什么 Hover 无法改变 HTML 中特定元素的颜色？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
178
