将规则应用于同一级别的所有节点，最后一行中的节点除外[重复]答案

【问题标题】：Apply rules to all nodes in the same level, except the ones in the last row [duplicate]将规则应用于同一级别的所有节点，最后一行中的节点除外[重复]
【发布时间】：2020-06-27 19:42:48
【问题描述】：

我知道问题的标题有点令人困惑，所以我会尝试更好地解释我想说的话。

假设我有一组元素，比如一个网格。 - 这个网格可能不均匀 - 这个网格可以有任意数量的列

这是一个包含 7 个元素的 3 列网格示例。

如你所见，我在一些元素下方画了一条线。

我想要将这些样式应用于所有元素，除了最后一行的元素。无论这可能包含多少项目。

我怎样才能做到这一点？

标记真的和你想象的一样简单：

<div class="items">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

我现在拥有的是：

.item:nth-child(n + 4){
    border-top: 1px solid black;
}

【问题讨论】：

你现有的 CSS 是什么样的？请发minimal reproducible example
这看起来就像所有项目的边框顶部
添加了我的 CSS
动态地，no - 布局模型，如 flexbox 和 grid 不提供选择特定行或列的机制。您必须事先知道您有多少列。有 questions like this one 提供更多上下文（和可能的解决方法）

标签： css

【解决方案1】：

由于已经展示了大多数方法，我将留下一个 hacky 解决方案。

您可以在最后一项中使用带有position: absolute 的伪元素，它将覆盖底部的整个水平宽度。 position: relative 将在父元素中。

.items {
  position: relative;
}
.item:last-child:before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background-color: #ffffff;
  width: 100%;
}

这不会删除边框，而是隐藏它们。仅当背景为纯色时才有效。

【讨论】：