CSS样式继承与hover伪类的作用范围详解
本文分析CSS选择器和样式继承中一个常见问题：父元素的hover伪类为何有时无法影响子元素样式？
问题描述： 一个<div>包含一个<code><p></p>元素。CSS中，<p></p>元素字体颜色设为黄色，<div>元素的<code>hover伪类设为红色字体颜色。鼠标悬停在<div>上时，只有<code><div>外文本变红，<code><p></p>内文本仍为黄色。这是为什么？尤其当<p></p>元素不设置颜色属性时，<div>的<code>hover伪类会影响<p></p>，但一旦设置了<p></p>颜色，则失效。
这并非hover伪类优先级问题，而是CSS继承机制。color属性是继承属性，子元素未显式定义color时，继承父元素的color值。因此，<div>应用<code>hover伪类改变颜色后，若<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1683" title="MusicLM"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d44444806483.png" alt="MusicLM" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1683" title="MusicLM">MusicLM</a>
<p>谷歌平台的AI作曲工具，用文字生成音乐</p>
</div>
<a href="/ai/1683" title="MusicLM" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>未设置color，它会继承<div>新的红色<code>color。但<p></p>一旦设置了自己的color（例如黄色），它便拥有自己的color值，不再继承父元素。所以，即使<div>应用<code>hover伪类改变颜色，<p></p>颜色保持不变。
立即学习“前端免费学习笔记（深入）”；
解决方案： 要使<p></p>元素在<div>悬停时也变红，有两种方法：
<p><strong>方法一：显式设置<code>hover状态下的<p></p>颜色：
p {
color: yellow;
}
div:hover,
div:hover p {
color: red;
}
方法二：利用not伪类，控制非悬停状态下的<p></p>颜色：
div:not(:hover) p {
color: yellow;
}
div:hover {
color: red;
}
通过以上方法，即可精确控制<p></p>元素在<div>元素悬停时的颜色变化。</div>
