CSS规则，适用于父元素中唯一的元素

Question

我已对此进行了标记

.parent {
  padding:5px;
}

.parent  .child:only-child {
  color:red;
}

<div class="parent">
<div class="elem1 child">
 Child
</div>
<div class="elem2 child">
 Child
</div>
<div class="elem3 child">
 Child
</div>

</div>
<div class="parent">
<div class="elem1">
 Child 
</div>
<div class="elem2">
 Child
</div>
<div class="elem3 child">
 I need to change it here
</div>
</div>

如您所见， 我不确定如何在第二个父类中检测“ elem3子级”。 在此类中，elem3实际上唯一的子类是child。

在这种情况下，是否有任何CSS规则来选择它？ 谢谢您的帮助。

Answer 1

请在下面查看是否适合您：

.parent {
  padding:5px;
}

.parent [class="elem2"] + [class="elem3 child"] {
  color:red;
}

<div class="parent">
    <div class="elem1 child">
     Child
    </div>
    <div class="elem2 child">
     Child
    </div>
    <div class="elem3 child">
     Child
    </div>
    
    </div>
    <div class="parent">
    <div class="elem1">
     Child 
    </div>
    <div class="elem2">
     Child
    </div>
    <div class="elem3 child">
     I need to change it here
    </div>
</div>

Answer 2

这可能会有所帮助。但是，如果您希望将其作为通用选择，那么javascript选择器是唯一的选择。

.parent {
  padding: 5px;
}

.parent:nth-of-type(2) > div.child {
  color: red;
}

<div class="parent">
  <div class="elem1 child">
    Child
  </div>
  <div class="elem2 child">
    Child
  </div>
  <div class="elem3 child">
    Child
  </div>

</div>
<div class="parent">
  <div class="elem1">
    Child
  </div>
  <div class="elem2">
    Child
  </div>
  <div class="elem3 child">
    I need to change it here
  </div>
</div>