html - 如何仅影响具有 Last of 类型的 sibling

Question

我想定位容器中的最后一个 div，但我的样式似乎只影响子 div，而不影响同级 div。如何将这些样式限制在同级级别？

在下面的代码中，最后一个 .sibling 应该受到影响，但每个 .child-2 都会受到影响。我还尝试为直系后代添加 >，但它不起作用。

.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{...}

.my-container div.sibling:last-of-type {
  color: red;
  border: 1px solid green;
}

<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>