Question

当同一个班级的另一个兄弟姐妹之后，我该如何定位该班级的最后一个孩子？最好有:last-sibling和:last-sibling-of-type。

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

Answer 2

我在这里看到4种可能性：

案例1：

您已经知道grid-orphan个项目的数量，因此可以使用nth-last-child。

.grid-item:nth-last-child(4) {
    background: blue;
}

案例2：

您是冒险家，这不适合生产：使用nth-child和nth-last-child的最新版本：

.grid-item:nth-last-child(1 of .grid-item) {
    background: blue;
}

但是，它目前仅适用于Safari（12.99%）。

See specs

案例3：

使用JavaScript。

const items = document.querySelectorAll('.grid-item')
const selectedItem = [].slice.call(items).pop();

selectedItem.style.background = 'blue';

案例4：

只需添加一个额外的类。

<div class="grid-item grid-item--special"></div>

.grid-item.grid-item--special {
    background: blue;
}

Answer 3

所有这些答案都很棒。谢谢。我最终只是使孤儿//You can use this for load HTML in a div $( "#result" ).load( "webpage.html #divId" );，然后<span>'s正常工作。我知道我可以这样做，但是我想知道，当孤儿与网格项目具有相同的元素类型时，是否可以轻松地做到这一点。

Answer 4

如果可以将所有.grid-orphan元素放在另一个div中，则可以使用：nth-last-child或:nth-last-of-type。

HTML

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-orphans">
    <div class="grid-orphan"></div>
    <div class="grid-orphan"></div>
    <div class="grid-orphan"></div>
  </div>
</div>

SCSS

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  .grid-item {
    background: gray;
    border: 1px solid white;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100px;
    width: calc(25% - 20px);
    min-width: 360px;
    flex-grow: 2;
    justify-content: flex-start;
    cursor: pointer;

    &:nth-last-child(2) {
      background: navy;
    }
  }

  .grid-orphan {
    height: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    width: calc(25% - 20px);
    min-width: 360px;
    flex-grow: 2;
    justify-content: flex-start;
    cursor: pointer;
  }
}

Jsfiddle可用here。

否则，纯CSS方法将仅限于only Apple's browsers（即Safari桌面和iOS），因为它们是唯一实现选择器列表参数的方法，通过该方法您可以缩小元素的范围类选择器。要查看此内容，只需将&:nth-last-child(2)更改为&:nth-last-child(1 of .grid-item)

目标：具有同级混合兄弟姐妹的最后一个孩子？

4 个答案: