css - 将规则应用于同一级别中的所有节点，最后一行中的节点除外

Question

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

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

这是一个包含 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

Answer 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%;
}

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