更改最后一个<li>的CSS

Question

我想知道是否有一些方法可以使用CSS更改li列表中最后一个的CSS属性.我已经研究过使用:last-child,但这看起来真的很麻烦,我无法让它为我工作.如有必要,我将使用JavaScript来执行此操作,但我想知道是否有人可以在CSS中考虑解决方案.

Answer 1

:last-child在没有修改HTML的情况下实际上是唯一的方法 - 但假设你可以这样做,主要的选择是给它一个class="last-item",然后做:

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

显然,您可以使用您选择的动态页面生成语言自动执行此操作.此外,lastChildW3C DOM中还有一个JavaScript属性.

这是一个在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实现 - 因此它应该在整个浏览器中减少错误并且更可靠.

Answer 2

我用纯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;
}

Answer 3

我通常将CSS和JavaScript方法结合起来,因此它在所有浏览器中都可以在没有JavaScript的情况下工作,但IE6/7和IE6/7中的JavaScript(但不是关闭),因为它们不支持:last-child伪类.

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

li:last-child,li.last-child{ /* ... */ }

Answer 4

您可以使用jQuery并以这种方式执行

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

Answer 5

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-childbuggy,但仅限于它将选择一些根元素(doctype或html),并且如果插入其他元素,则可能不会更改样式.

Answer 6

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

ul li:last-of-type { color: red; }