css - 目标 :last-child with mixed class siblings?

Question

当一个类(class)后面有 sibling 时，我如何定位类(class)的最后一个 child ？如果有 :last-sibling 和 :last-sibling-of-type 就好了。

FIDDLE

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div> /* How do I target this if its nth position is unknowable? */
  <div class="grid-orphan"></div>
  <div class="grid-orphan"></div>
  <div class="grid-orphan"></div>
</div>

Answer 1

如果您需要从文档中取出最后一个 .grid-item 元素，而不管它里面有什么，那么您不能在 CSS 中这样做。在 CSS 中，您只能选择层次结构的一个特定级别的第一个、最后一个或第 n 个元素，您不能选择某种类型的最后一个元素，无论它嵌套在什么中。

这是获取 .grid 中最后一个 div 的一种方法>

.grid div:last-of-type

这是另一种获取外部 div 的最后一个子元素的方法:

div :last-child

但是您可能需要的是一些 js:

您可以使用 jquery 方法(如下所示)执行此操作，或者只执行 getElementsByClassName，然后以相同的方式设置列表中的最后一个元素。

function getlastchild() {

  var items = $(".grid-item");

  items.last().css("background-color", "red");
  //OR even as one-liner: $(".grid-item").last().css("background-color", "red");

}

.grid {
  width: 200px;
}

.grid div:last-of-type {
  color: white;
}

div:last-child {
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-orphan">5</div>
  <div class="grid-orphan">6</div>
  <div class="grid-orphan">7</div>
</div>

<button onclick="getlastchild()">Press me to get last grid-item</button>