css :hover伪类与样式继承的巧妙互动
本文分析了CSS选择器:hover与样式继承之间的关系，并解释了为什么:hover伪类有时无法像预期那样影响子元素的样式。
让我们来看一个例子：
HTML代码：
<div>
<p>mmm</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>sss
</div>
CSS代码：
p {
color: yellow;
}
div:hover {
color: red;
}
当鼠标悬停在<div>元素上时，"sss"文本变为红色，而"mmm"文本颜色保持黄色。这是因为<code>color属性是继承属性。当<div>元素应用<code>:hover样式变为红色时，<p></p>元素会继承其父元素的color属性，但前提是<p></p>元素本身没有定义color属性。由于<p></p>元素已设置color: yellow，它不会再继承父元素的红色。
为了使<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1188" title="Fotor"><img
src="https://img.php.cn/upload/ai_manual/001/431/639/68b7ae8a10183155.png" alt="Fotor" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1188" title="Fotor">Fotor</a>
<p>Fotor 在线照片编辑器</p>
</div>
<a href="/ai/1188" title="Fotor" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>元素在<div>元素悬停时也变为红色，我们可以采用以下两种CSS方法：
<p><strong>方法一：直接选择子元素</strong></p>
<pre class="brush:php;toolbar:false;">p {
color: yellow;
}
div:hover,
div:hover p {
color: red;
}</pre>
<p>此方法直接选择<code>div:hover下的<p></p>元素，并将其颜色设置为红色，从而覆盖<p></p>元素自身的color属性。
方法二：使用div:not(:hover)选择器
div:not(:hover) p {
color: yellow;
}
div:hover {
color: red;
}
此方法更巧妙地利用了:not()伪类。它首先设置当<div>元素<strong>未</strong>悬停时<code><p></p>元素的颜色为黄色，然后设置<div>元素悬停时的颜色为红色。这样，当<code><div>悬停时，<code><p></p>元素会继承<div>的红色，从而达到预期效果。
<p><img src="https://img.php.cn/upload/article/001/246/273/174092798259611.jpg" alt="CSS中:hover伪类作用范围受继承影响吗？"></p>
<p>通过以上分析和两种解决方案，我们可以更好地理解CSS样式继承与<code>:hover伪类作用范围之间的关系，并编写出更精准、高效的CSS代码。
