如何通过单击孩子的父母来显示孩子的活动状态？

Question

当单击孩子的父母时，如何显示孩子的活动状态？在下面的示例代码中，我想单击div并同时显示<a>标签的活动状态。帮助吗？

div:active {
  background-color: pink;
}

a:active {
  background-color: yellow;
}

<div>
  <a href="https://www.w3schools.com">w3schools.com</a>
</div>

Answer 1

当父级为>时，可以使用后代选择器:active（或其他将active父级为目标的选择器）作为子级的样式。

div:active {
  background-color: pink;
}

div:active > a, a:active {
  background-color: yellow;
}

<div>
  <a href="https://www.w3schools.com">w3schools.com</a>
</div>