更改 last < li > 的 CSS

我想知道是否有一些方法可以使用 CSS 更改列表中最后一个 li的 CSS 属性。我已经研究了使用 :last-child，但这似乎真的错误，我不能让它为我工作。如果有必要，我将使用 JavaScript 来完成这项工作，但我想知道是否有人可以想出一个 CSS 解决方案。

192905 次浏览
小开
最佳答案

:last-child实际上是不修改 HTML 的唯一方法——但是假设你可以做到这一点，主要的选择就是给它一个 class="last-item"，然后执行:

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

显然，您可以使用自己选择的动态页面生成语言来实现这一点。此外，W3CDOM 中还有一个 lastChildJavaScript 属性。

下面是在 原型中做你想做的事情的一个例子:

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

或者更简单:

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

在 < strong > jQuery 中，你可以写得更简洁:

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

还要注意的是，这个 应该没有使用实际的 last-child CSS 选择器，而是使用了它的一个 JavaScript 实现，所以它在不同浏览器之间应该更少的 bug 和更可靠。

小开

您可以使用 JQuery并按照这种方式进行操作

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

我通常把 CSS 和 JavaScript 方法结合起来，这样除了 IE6/7以外，所有浏览器都不需要 JavaScript，IE6/7也不需要打开 JavaScript (但不是关闭) ，因为它们不支持 :last-child伪类。

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


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

例如，如果你知道列表中有三个里，你可以这样做:

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

在 IE6中，你可以使用表达式:

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

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

小开

我通常通过创建一个 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 标记，但没有定义任何标记。最后一个孩子的班级将是院长爱德华兹 Ie7.js图书馆。

小开

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;
}

这对于其他一些情况，比如边界问题，效果会很好。

根据 位置，:first-child存在 bug，但是仅限于它将选择一些根元素(doctype 或 html) ，并且如果插入其他元素，可能不会改变样式。

小开

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

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

$(‘ li’) . last () . addClass (‘ some Class’) ;

如果您有多个 < li > 组 它只会选择最后一里。

小开

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

2015年答案 : CSS 最后类型允许你设计最后一个项目。

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

提交答案