深入探索 hover 优先级与继承属性
在 html 和 css 中，设置元素的样式时，会遇到优先级和继承属性的问题。本文将探讨一个看似简单的悬停效果为何不生效的问题，并揭示背后的原因和解决方案。
问题：hover 对 p 元素不生效
考虑以下代码：
立即学习“前端免费学习笔记（深入）”；
mmm
sss
登录后复制
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 样式： 直接为 p 元素添加悬停样式，如下所示：
p:hover { color: red;}
登录后复制使用 not() 选择器： 使用 not() 选择器指定在 div 不悬停时，恢复 p 元素为黄色：
div:not(:hover) p { color: yellow;}div:hover { color: red;}
登录后复制将 p 从 div 移除： 如果 p 元素不依赖于 div 的其他属性，可以将它移出 div，使其不受继承的影响：
mmm
sss
登录后复制
p { color: yellow;}div:hover { color: red;}
登录后复制登录后复制
以上就是为什么 Hover 无法改变 HTML 中特定元素的颜色？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3120524.html
