对象:混血儿兄弟姐妹的最后一个孩子

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%(。

查看规格

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

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

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

南海

.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 可在此处获得。

否则，仅CSS方法将仅限于Apple的浏览器，即Safari桌面和iOS浏览器，因为它们是唯一实现选择器列表参数的浏览器，该参数允许您通过类选择器缩小元素范围。看到这一点，只需用&:nth-last-child(1 of .grid-item)更改&:nth-last-child(2)

Answer 4

所有这些答案都很棒。谢谢。我最终只是让孤儿<span>'s然后.grid-item:last-child工作得很好。我知道我可以做到这一点，但想知道当孤儿与网格项的元素类型相同时是否可以(轻松(完成。