Question

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

Answer 1

:last-child实际上是在不修改HTML的情况下实现这一目标的唯一方法 - 但假设您可以这样做，主要选项只是给它一个class="last-item"，然后执行：

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

显然，您可以使用您选择的动态页面生成语言自动执行此操作。此外，W3C DOM中还有lastChild 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-child CSS选择器 - 而是使用它的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-child错误，但仅限于它将选择一些根元素（doctype或html），并且如果插入其他元素，则可能不会更改样式。

Answer 6

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

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

Answer 7

我通常是通过创建一个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库。

Answer 8

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

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

Answer 9

。

$（ '礼'）最后（）addClass（ 'SomeClass的'）;

如果您有多个

组它只会选择最后一个li。

Answer 10

如果您知道列表中有三个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选择器获得更好的支持。

更改最后一个<li> </li>的CSS

10 个答案: