css :hover伪类与样式继承的巧妙互动
本文分析了CSS选择器:hover与样式继承之间的关系，并解释了为什么:hover伪类有时无法像预期那样影响子元素的样式。
让我们来看一个例子：
HTML代码：
mmm
立即学习“前端免费学习笔记（深入）”；
sss
CSS代码：
p {
color: yellow;
}
div:hover {
color: red;
}
当鼠标悬停在 为了使 方法一：直接选择子元素 此方法直接选择 方法二：使用 此方法更巧妙地利用了 通过以上分析和两种解决方案，我们可以更好地理解CSS样式继承与元素上时，"sss"文本变为红色，而"mmm"文本颜色保持黄色。这是因为color属性是继承属性。当元素应用:hover样式变为红色时，元素会继承其父元素的color属性，但前提是元素本身没有定义color属性。由于元素已设置color: yellow，它不会再继承父元素的红色。
元素在元素悬停时也变为红色，我们可以采用以下两种CSS方法：
p {
color: yellow;
}
div:hover,
div:hover p {
color: red;
}
div:hover下的元素，并将其颜色设置为红色，从而覆盖元素自身的color属性。div:not(:hover)选择器div:not(:hover) p {
color: yellow;
}
div:hover {
color: red;
}
:not()伪类。它首先设置当元素未悬停时元素的颜色为黄色，然后设置元素悬停时的颜色为红色。这样，当悬停时，元素会继承的红色，从而达到预期效果。
:hover伪类作用范围之间的关系，并编写出更精准、高效的CSS代码。
