鼠标悬停类a父div时，类b内h1/h2/h3颜色不生效的CSS问题

你遇到的问题是因为h1、h2、h3这些标题元素自带浏览器默认的文字颜色样式，这些样式的优先级比父元素.b继承过来的color更高，所以你给.b设置的color: white不会作用到标题上。

解决方法很简单，直接选中.b内部的h1、h2、h3元素，单独设置它们的文字颜色：

.a:hover .b {
  background-color: red;
}
.a:hover .b h1,
.a:hover .b h2,
.a:hover .b h3 {
  color: white;
}

如果想简化代码，也可以用:is()选择器一次性选中多个标题元素：

.a:hover .b {
  background-color: red;
}
.a:hover .b :is(h1, h2, h3) {
  color: white;
}

这样鼠标悬停在.a上时，.b的背景会变红，内部的标题文字也会变成白色了。

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