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

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

html:

有时，其中包含h4:s的行项目最终成为行的最后一项，成为孤立项。我想解决这个问题，并且一直在考虑两个备选方案

使用css孤立属性，但由于标记，我认为它根本不起作用，而且在Firefox和Safari中也不受支持，支持不是必须的，但会很好

---

在列末尾的任何h4中添加一些上边距/填充，但我不知道如何选择它们，无论是使用css还是javascript/jquery。我希望保留标记，但如果不可能，我可以更改它。

您可以使用：last child选择器选择最后一个LI元素

    li:last-child{color:red;}

---

你的问题不清楚

如果您想知道您的元素（例如

h4

）是否在最后一个

li

中，请使用CSS：

ul li:last-of-type h4

如果您想在JS中了解这一点，但不使用伪选择器，则可以使用：

$(function () {
    var $li = $('ul > li'),
        count = $li.length - 1,
        cssClass = 'last';

    $li.eq(count).addClass(cssClass);;
});

从这里开始使用CSS

ul li.last h4

---

工作小提琴：

是的，您可以从html中删除孤立的h4标记。下面是执行相同操作的简单脚本

$('h4').each(function() {
    var $this = $(this);
    if($this.html().replace(/\s| /g, '').length == 0)
        $this.remove();
});

---

CSS中的列不支持内容。只有两个与列相关的属性可以在某种程度上帮助您：列填充（仅在firefox中有效）和内部中断

Column fill将根据容器的高度通过列分发内容

分页符对列的作用与clear对浮动的作用相同，可以防止元素卡在列之间。它在不同的浏览器中具有不同的语法

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

---

但无论如何，如果您有一个包含文本的容器，并且希望将其划分为列，而不需要任何额外的标记，则列会更有帮助。由于您使用的是li，并且div中不只有文本，因此我建议您使用float来实现所需的多列布局

如果要选择每列中的最后一个元素（假设

li

是一列），可以使用以下CSS

ul > li h4:last-of-type

或jQuery：

$('ul > li h4:last-of-type')

---

提供小提琴：

我很难理解您需要选择什么。这是最后一个李吗？为了清晰起见更新了@Kristofernolgren我已经发布了另一个答案，检查这个提琴：是否不是天气。它不是最后一个元素，它是列中的最后一项。因此删除h4，您将选择最后一列lawl。无论如何，添加了jQuery解决方案它不是ul中的最后一个元素，它是列中的最后一项这不是问题的答案它不是ul中的最后一个元素，它是列中的最后一项列是一个css属性，它将内容压缩到列中。这是不可能的@努诺波罗尼亚给了你一个答案，你应该接受-1对于不清楚的问题。

ul > li h4:last-of-type

$('ul > li h4:last-of-type')