CSS中:hover伪类作用范围受继承影响吗？-css教程-PHP中文网

CSS中:hover伪类作用范围受继承影响吗？

聖光之護

发布： 2025-03-02 23:06:18

原创

678人浏览过

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样式变为红色时，元素会继承其父元素的color属性，但前提是元素本身没有定义color属性。由于元素已设置color: yellow，它不会再继承父元素的红色。

为了使


                        
                            
                        
                        
                            影谱
                            汉语电影AI辅助创作平台
                            
                                
                                8
                            
                        
                        
                            查看详情

元素在

<div>元素悬停时也变为红色，我们可以采用以下两种CSS方法：
<p><strong>方法一：直接选择子元素</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">p {
    color: yellow;
}

div:hover,
div:hover p {
    color: red;
}</pre>登录后复制</div>
<p>此方法直接选择<code>div:hover

下的元素，并将其颜色设置为红色，从而覆盖元素自身的color属性。

方法二：使用div:not(:hover)选择器

div:not(:hover) p {
    color: yellow;
}

div:hover {
    color: red;
}

登录后复制

此方法更巧妙地利用了:not()伪类。它首先设置当

元素未悬停时<p></p>元素的颜色为黄色，然后设置元素悬停时的颜色为红色。这样，当悬停时，<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代码。

CSS中:hover伪类作用范围受继承影响吗？

大家都在看：