从未知项目数网格底部行的所有项目中删除页边距底部

Question

我有一个网格，它包含未知数量的项目(数量可能会变化(，每行有3个项目。我想从最下面一行的所有项目中删除margin-bottom，不管项目数是1、2还是3。我见过像:nth-last-child(-n+3) { margin-bottom: 0; }这样的实现，但这总是从最后3个项目中删除边距，如果我的底行只有1或2个项目，这是不正确的。有办法这样做吗？

下面是一个示例来演示我所说的内容：https://codepen.io/jacksoncohen/pen/zYdWYBb

Answer 1

您可以做的事情如下：

.item:nth-child(3n):nth-last-child(-n+4) ~ * {
margin-bottom:0;
}

所以它的作用是：

1. 选择行:nth-child(3n)中的每个第三个元素
2. 根据条件:nth-last-child(-n+4)过滤这些元素(将该行中的所有第三个元素与最后四个元素相交(，因此现在至少选择了倒数第二行的第三个图元，可能还有最后一行的第3个图元
3. 使用~ *可以选择以下所有同级。最后一行的第3个元素没有，倒数第二行的第三个元素就是最后一行中的元素

现在只缺少边大小写，也就是说，如果只有一行。但在那里你可以做同样的交叉点技巧：

.item:nth-child(1):nth-last-child(3),
.item:nth-child(1):nth-last-child(3) ~ *,

所以你的最终规则是：

.item:nth-child(1):nth-last-child(3),
.item:nth-child(1):nth-last-child(3) ~ *,
.item:nth-child(3n):nth-last-child(-n+4) ~ * {
margin-bottom:0;
}