CSS选择器-如何选择活动父项的子元素？

Question

我有这个html代码

<div class="parent active">
  <div class="child_1"></div class="child_1">
  <div class="child_2"> some_text </div class="child_2">
</div>

当使用CSS选择器激活父级时，如何选择child_2类的div元素？

我可以使用以下方法选择活动的父母：

.parent:active

我尝试过但是失败了：

.parent:active > .child_2

Answer 1

.parent.active .child_2{
/*your style here*/
}

在您的情况下，active是一个类，因此您应该使用类选择器。

Answer 2

如果只想在具有class父类且处于活动状态的div下选择一个child_2类的元素，那么

.parent.active .child_2 {

}

Answer 3

您的选择器正常工作，因为当您单击该元素时，活动的伪类已启动，您可以在此处进行检查，当单击其容器时，child_2元素将变为红色：

.parent:active > .child_2{
  color: red;
}

  <div class="parent active">
    <div class="child_1">1</div class="child_1">
    <div class="child_2">2</div class="child_2">
  </div>

现在，我认为您正在寻找的是父母的班级为.active 时选择孩子。那是一个完全不同的选择器。

就像这样：.parent.active > .child_2，您可以看到以下示例：

.parent.active > .child_2{
  color: red;
}

  <div class="parent active">
    <div class="child_1">1</div class="child_1">
    <div class="child_2">2</div class="child_2">
  </div>

Answer 4

尝试一下。

.active .child_2 {
  color: red;
}

<div class="parent active">
  <div class="child_1"></div class="child_1">
  <div class="child_2"> some_text </div>
</div>