Css 在孩子上课时得到最后一个孩子

给定以下DOM树：

我需要在最后一个

.sticky

类中添加一个框阴影，该类作为

列表的子类可用

以下操作不起作用：

  .list {

    .sticky:last-child { box-shadow: 0 6px 4px -4px #888888; }
  }

我有点惊讶，我很难弄明白这一点
 应该是

.list .sticky:last-child {
  box-shadow: 0 6px 4px -4px #888888;
}

尝试给父div一个类，比如sticky container，然后将该类中的sticky对象作为目标。这应该将样式应用于div中的最后一个粘性子对象

范例

<div class="list">
 <div class="container">
    <div class="sticky">Sticky1</div>
    <div class="sticky">Sticky2</div>
    <div class="sticky">Sticky3</div>
  </div>
</div>

使用Javascript的解决方案。

在css方面不太确定，但是如果使用javascript，可以在父div中设置最后一个粘性的样式，如下所示：

const listWrapper = document.getElementById('sticky-container')
const stickyList = listWrapper.getElementsByClassName('sticky')
const lastSticky = listWrapper.getElementsByClassName('sticky')[stickyList.length -1]
lastSticky.style.boxShadow = '0 6px 4px -4px #888888'

试试这个

$(".sticky").last().css('box-shadow', '0 6px 4px -4px #888888');

只要
.list
和
.sticky
元素始终是同级元素，您就可以使用
：类型的最后一种方法：

。列表：最后一个类型。粘性：最后一个类型{
盒影：0 6px 4px-4px#8888888；
}

因此，该效果仅适用于单个元素：

最后一个
.sticky
是另一个
的兄弟姐妹。sticky
在最后一个
中。list
是另一个
的兄弟姐妹。list
是sass，应该是相同的，它不会工作，因为所有
都是最后一个孩子。这不是我的DOM的样子。每个列表有一个粘滞类，我需要确定列表中存在的最后一个粘滞div。如果是这种情况，您不能执行列表中的最后一个子级而不是粘滞。否，因为没有最后一个列表-我需要找到的是最后一个粘滞元素。可能有10个列表，如果第5个列表包含最后一个粘性元素，那么这就是我需要的。否，因为这将选择最后一个.list元素。它可能不是最后一个有粘性类的孩子。我不使用jQuery，希望得到一个纯css解决方案。但是如果不可能，我将计算它，因为它不清楚，您需要为每个
列表选择最后一个
.sticky
，还是在DOM中选择最后一个
.sticky
？您还可以写一个DOM结构的示例，而不是屏幕截图。@Arkellys不是针对每个列表，而是针对最后一个列表。例如，在屏幕截图中，您可以看到第二个.list项上的最后一个粘性项。2个折叠的.list项可能没有粘性子元素，这使得选择器应该选择屏幕截图中可见的最后一个粘性元素。我目前无法复制代码，因为我目前正在工作，而且我在这里没有项目。当然，如果没有纯css解决方案，我可以计算它。我想你在搜索这样的东西：你需要一些js来这样做。
$(".sticky").last().css('box-shadow', '0 6px 4px -4px #888888');