如何只影响具有Last类型的兄弟姐妹

Question

我想要定位容器中的最后一个div，但我的样式似乎只影响子div而不是兄弟div。如何将这些样式约束到兄弟级别？

在下面的代码中，最后的.sibling应该受到影响，但每个.child-2都会受到影响。我也试过添加＆gt;对于一个直接的后代，但它没有用。

.my-container div:last-of-type {
  color: red;
}

<div class="my-container">

  <div class="sibling">
    <div class="child-1">
      Child 1
    </div>
    <div class="child-2">
      Child 2
    </div>
  </div>

  <div class="sibling">
    <div class="child-1">
      Child 1
    </div>
    <div class="child-2">
      Child 2
    </div>
  </div>

  <div class="sibling">
    <div class="child-1">
      Child 1
    </div>
    <div class="child-2">
      Child 2
    </div>
  </div>

</div>

Answer 1

我认为你的选择器应该是 .my-container div.sibling:last-of-type { color: red; border: 1px solid green; }

＆＃13;

＆＃13;

<div class="my-container">

  <div class="sibling">
    <div class="child-1">
      Child 1
    </div>
    <div class="child-2">
      Child 2
    </div>
  </div>

  <div class="sibling">
    <div class="child-1">
      Child 1
    </div>
    <div class="child-2">
      Child 2
    </div>
  </div>

  <div class="sibling">
    <div class="child-1">
      Child 1
    </div>
    <div class="child-2">
      Child 2
    </div>
  </div>

</div>

＆＃13;

.my-container div.sibling:last-of-type {
  color: red;
}
/* will be the code */

＆＃13;

＆＃13;

＆＃13;

Answer 2

char