【CSS】鼠标经过父元素时，如何改变其下所有子孙元素的字体颜色

CSS

以下样式不会起作用。.son0和.son1有各自的字体颜色，鼠标经过父元素.father时，只会改变.father的字体颜色，其子元素的字体颜色不受影响。因为:hover的样式只是追加给.father本身的，而不是.father下面的所有元素。解决办法见下文。

.father {
  color: purple;
}
.father:hover {
  color: blue;
}
.son0 {
  color: red;
}
.son1 {
  color: green;
}

HTML

<div class="father">
  father
  <div class="son0">son0</div>
  <div class="son1">son1</div>
</div>

效果：

解决办法

我们可以在hover时，通过 通配符 * 改变所有元素的颜色，如下。 .father:hover意思是：加了:hover的元素本身。 .father:hover *意思是：加了:hover的元素下面所有子孙元素，此时父元素的颜色不会改变。因此需要将再给.father本身改一下颜色。

.father {
  color: purple;
}
.father:hover * {
  color: blue;
}
.father:hover {
  color: blue;
}
.son0 {
  color: red;
}
.son1 {
  color: green;
}

效果：