是否可以确定您是否位于 css 定义的列的最后一行？

我正在使用新的 css 样式列将单个 ul 分成多个列。我希望使用 javascript 或 CSS 选择每列中的最后一个元素。

html:

<ul>
  <li />
  <li />
  <li><h4 /></li>
  ...
</ul>

css:

ul{
   column-count: 6;
}

有时，带有 h4:s 的行项目最终会成为该行的最后一个项目，成为孤儿。我想解决这个问题，并且一直在寻找两种替代方案。

使用 css orphan 属性，但由于标记，我认为它根本不起作用，并且 Firefox 和 Safari 并非不支持它，支持不是必须的，但会很好。

向列末尾的任何 h4 添加一些上边距/填充，但我不知道如何使用 css 或 javascript/jquery 选择它们。我更愿意保留标记，但如果不可能，我可以更改它。

CSS 中的列无法识别内容。与列相关的唯一两个可以在某种程度上帮助您的属性是列填充（仅适用于 Firefox）和内部中断。

列填充将根据容器的高度将内容分布在列中。

分页符对于列的作用就像清除对于浮动的作用一样，可以防止元素卡在列之间。它在不同的浏览器中具有不同的语法。

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

但无论如何，当您有一个包含文本的容器并且希望将其划分为列而不需要任何额外标记时，列会更有用。由于您使用的是 li 并且 div 中不仅仅有文本，因此我建议您使用浮动来实现您正在寻找的多列布局。