CSS列：针对每个列中的最后一个子项？

我有一个使用CSS3列计数的报纸格式的标题网格

HTML:

<ul>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <!-- ... etc ... -->
</ul>

ul {
    column-count: 3;
    column-rule: 1px solid #ccc;
}
li { border-bottom: solid 1px #ccc; }

您可以看到这是怎么回事：CSS中是否有任何方法可以针对每列中的最后一个

li

元素，以便删除底部边框

我找到了，但是没有答案

li:n子（2n）{边框底部：无；}

---

我认为@Vucko给出了一个答案，它为你指明了正确的方向，但它确实不是很有活力。只有知道列数和固定行数时才适用。我想添加这个答案，提供另一个解决问题的方法。我不得不说，这只是一种变通方法，它不使用任何类型的CSS选择器，因为正如我所说的，Vucko给出的解决方案似乎是唯一最直接的解决方案

这里的想法是，您只需将一些伪元素添加到

ul

元素中，使其粘在底部，并与父

ul

具有相同的背景，以便隐藏底线。遗憾的是，它还隐藏了垂直线（列规则），如果这并不重要，我认为您应该选择以下解决方案：

ul {
  ...
  position:relative;
}

ul:after {
  content:'';
  width:100%;
  height:34px;
  position:absolute;
  background-color:inherit;
  bottom:0;
  left:0;
} 

共3列。您可以更改列数，而无需更改任何其他列

---

注意：我很确定您的问题没有直接的解决方案（可以动态地选择每列的最后一项）。因为所有项目都以列的形式排列，但实际上它们只是父级

ul

中包含的用于分隔线的内联项目，因此您可以将行添加到项目的顶部，而不是底部

---

通过这种方式，您可以始终隐藏每列中的第一行，因为它们处于相同的垂直位置（使用伪元素覆盖）。

我想不出任何合理的答案，因为您甚至可以在

标记中使用“column break”，这样底部就不会有边框需要首先删除。无论如何，我不确定css列是否适合这种情况。我同意@patrickj。我认为，如果纯css必须在所有情况下都有效，那么它就无法解决这个问题。无论是

n个孩子

还是

n个最后一个孩子

都不能满足您的要求，我怀疑是否有其他选择器可以满足此要求。谢谢，但只有当每列中有两个项目时，此选项才起作用。如果我能确定每列中元素的数量，我就不需要使用CSS列了。谢谢。虽然，正如你所说，没有直接的解决方案（我没想到会有），但它的创造性足以让我接受它是一个可行的解决方案。我要开始玩了。

ul {
  ...
  position:relative;
}

ul:after {
  content:'';
  width:100%;
  height:34px;
  position:absolute;
  background-color:inherit;
  bottom:0;
  left:0;
}