如何用纯CSS实现父元素hover时子元素继承其样式并覆盖原有样式

这效果纯CSS完全能搞定，根本不用上JavaScript，核心思路就是用后代选择器匹配父元素hover状态下的内部子元素，靠更高的选择器优先级，自然就能覆盖子元素之前单独定义的独立样式。

调整后的完整实现代码 #

div {
    padding: 8px;
}

div:hover {
    background-color: red;
}

/* 核心新增规则：父元素处于hover状态时，同步修改内部span的背景色 */
div:hover span {
    background-color: red;
}

span {
    background-color: yellow;
}

原有HTML结构不需要做任何改动，示例文本替换为中文后效果完全一致：

<div>鼠标悬停在这个div上时，内部的<span>被包裹的span元素</span>背景也要同步匹配父元素的hover样式</div>

生效逻辑说明 #

• 优先级层面：div:hover span 选择器的权重高于单独给span写的基础样式，父元素一旦激活hover状态，这条规则就会自动生效，直接覆盖span原本的黄色背景
• 触发范围：只要鼠标落在div的任意位置（哪怕刚好悬停在内部span上），父元素的hover状态就会被触发，对应的子元素联动样式同步生效，全程不需要JS监听鼠标事件

常用优化调整 #

• 如果不需要把hover效果套用到所有嵌套层级的span上，可以把选择器收紧为div:hover > span，仅匹配div的直接子span，不会影响更深层嵌套的同名子元素
• 如果需要子元素完全适配父元素的hover视觉效果，只需要在div:hover span规则里把需要同步的样式属性一一写上即可，不用依赖CSS的自动继承机制，可控性更强

内容的提问来源于stack exchange，提问作者Len White