深入探索 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;
} 
