77

我想知道是否有某种方法可以使用 CSS 更改li列表中最后一个的 CSS 属性。我已经研究过使用:last-child，但这似乎真的有问题，我无法让它为我工作。如有必要，我将使用 JavaScript 来执行此操作，但我想知道是否有人可以在 CSS 中想出一个解决方案。

4

10 回答 10

105

:last-child确实是在不修改 HTML 的情况下做到这一点的唯一方法 - 但假设你能做到这一点，主要的选择就是给它一个class="last-item"，然后做：

li.last-item { /* ... */ }

显然，您可以使用您选择的动态页面生成语言自动执行此操作。此外，W3C DOM 中有一个lastChildJavaScript 属性。

这是一个在Prototype中做你想做的事情的例子：

$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });

或者更简单：

$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });

在jQuery中，您可以更紧凑地编写它：

$("ul li:last-child").addClass("last-item");

另请注意，这应该在不使用实际last-childCSS 选择器的情况下工作 - 而是使用它的 JavaScript 实现 - 所以它应该更少错误并且跨浏览器更可靠。

于 2009-08-25T17:50:37.743 回答
63

我用纯 CSS 完成了这个（可能是因为我来自未来 - 比其他人晚 3 年：P）

假设我们有一个列表：

<ul id="nav">
  <li><span>Category 1</span></li>
  <li><span>Category 2</span></li>
  <li><span>Category 3</span></li>
</ul>

然后我们可以轻松地将最后一项的文本变为红色：

ul#nav li:last-child span {
   color: Red;
}
于 2012-11-06T11:29:19.100 回答
12

我通常将 CSS 和 JavaScript 方法结合起来，以便它在除 IE6/7 之外的所有浏览器中无需 JavaScript 即可工作，并且在 IE6/7 中打开（但不是关闭）JavaScript，因为它们不支持:last-child伪类。

$("li:last-child").addClass("last-child");

li:last-child,li.last-child{ /* ... */ }
于 2009-08-25T17:58:07.930 回答
10

你可以使用jQuery并这样做

$("li:last-child").addClass("someClass");
于 2009-08-25T17:54:43.473 回答
7

IE7+ 和其他浏览器的一种替代方法可能是使用:first-child，并反转您的样式。

例如，如果您在每个 上设置边距li：

ul li {
  margin-bottom: 1em;
}
ul li:last-child {
  margin-bottom: 0;
}

你可以用这个替换它：

ul li {
  margin-top: 1em;
}
ul li:first-child {
  margin-top: 0;
}

这适用于边界等其他一些情况。

根据sitepoint，:first-child错误，但仅限于它会选择一些根元素（doctype 或 html），并且如果插入其他元素可能不会改变样式。

于 2009-08-26T11:37:46.140 回答
5

2015 答案：CSS last-of-type允许您设置最后一项的样式。

ul li:last-of-type { color: red; }
于 2015-03-10T19:20:40.117 回答
3

我通常通过创建一个 htc 文件（例如 last-child.htc）来做到这一点：

<attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() {
  this.lastChild.className += ' last-child';
}
</script>

并从我的 IE 条件 css 文件中调用它：

ul { behavior: url("/javascripts/htc/last-child.htc"); }

而在我的主 css 文件中，我得到了：

ul li:last-child,
ul li.last-child {
  /* some code */
}

另一个使用现有 css 标记而不定义任何 .last-child 类的解决方案（尽管速度较慢）是 Dean Edwards ie7.js库。

于 2009-08-26T00:04:24.163 回答
2

:last-child 是 CSS3 并且没有 IE 支持而 :first-child 是 CSS2，我相信以下是使用 jquery 实现它的安全方法

$('li').last().addClass('someClass');
于 2010-04-22T05:49:22.453 回答
2

$('li').last().addClass('someClass');

如果你有多个

  • group 它只会选择最后一个 li。

    • 于 2010-08-26T08:25:07.397 回答
    0

    例如，如果您知道您正在查看的列表中有三个 li，您可以这样做：

    li + li + li { /* Selects third to last li */
}

    在 IE6 中，您可以使用表达式：

    li {
    color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */
}

    不过，我建议使用专门的类或 Javascript（不是 IE6 表达式），直到:last-child选择器获得更好的支持。

    于 2009-08-25T21:42:24.513 回答