Html 更改最后一个 <li> 的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1329841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing CSS for last <li>
提问by PF1
I am wondering if there is some way to change a CSS attribute for the last liin a list using CSS. I have looked into using :last-child, but this seems really buggy and I can't get it to work for me. I will use JavaScript to do this if necessary, but I want to know if anyone can think up a solution in CSS.
我想知道是否有某种方法可以使用 CSS 更改li列表中最后一个的 CSS 属性。我已经研究过使用:last-child，但这似乎真的有问题，我无法让它为我工作。如有必要，我将使用 JavaScript 来执行此操作，但我想知道是否有人可以在 CSS 中想出解决方案。
回答by Lucas Jones
:last-childis really the only way to do it without modifying the HTML - but assuming you can do that, the main option is just to give it a class="last-item", then do:
:last-child确实是不修改 HTML 的唯一方法 - 但假设你可以这样做，主要的选择就是给它一个class="last-item"，然后执行：
li.last-item { /* ... */ }
Obviously, you can automate this in the dynamic page generation language of your choice. Also, there is a lastChildJavaScript property in the W3C DOM.
显然，您可以使用您选择的动态页面生成语言自动执行此操作。此外，lastChildW3C DOM 中有一个JavaScript 属性。
Here's an example of doing what you want in Prototype:
这是一个在Prototype中做你想做的事的例子：
$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });
Or even more simply:
或者更简单：
$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });
In jQuery, you can write it even more compactly:
在jQuery 中，你可以写得更紧凑：
$("ul li:last-child").addClass("last-item");
Also note that this shouldwork without using the actual last-childCSS selector - rather, a JavaScript implementation of it is used - so it should be less buggy and more reliable across browsers.
另请注意，这应该在不使用实际last-childCSS 选择器的情况下工作- 而是使用它的 JavaScript 实现 - 因此它应该更少错误并且跨浏览器更可靠。
回答by pano
I've done this with pure CSS (probably because I come from the future - 3 years later than everyone else :P )
我已经用纯 CSS 做到了这一点（可能是因为我来自未来 - 比其他人晚 3 年：P）
Supposing we have a list:
假设我们有一个列表：
<ul id="nav">
<li><span>Category 1</span></li>
<li><span>Category 2</span></li>
<li><span>Category 3</span></li>
</ul>
Then we can easily make the text of the last item red with:
然后我们可以轻松地将最后一项的文本变为红色：
ul#nav li:last-child span {
color: Red;
}
回答by pano
I usually combine CSS and JavaScript approaches, so that it works without JavaScript in all browsers but IE6/7, and in IE6/7 with JavaScript on (but not off), since they does not support the :last-childpseudo-class.
我通常将 CSS 和 JavaScript 方法结合起来，这样它就可以在除 IE6/7 之外的所有浏览器中都没有 JavaScript 的情况下工作，并且在 IE6/7 中启用（但不关闭）JavaScript，因为它们不支持:last-child伪类。
$("li:last-child").addClass("last-child");
li:last-child,li.last-child{ /* ... */ }
回答by Keith Adler
回答by DisgruntledGoat
One alternative for IE7+ and other browsers may be to use :first-childinstead, and invert your styles.
IE7+ 和其他浏览器的一种替代方法可能是使用:first-child，并反转您的样式。
For example, if you're setting the margin on each li:
例如，如果您在每个上设置边距li：
ul li {
margin-bottom: 1em;
}
ul li:last-child {
margin-bottom: 0;
}
You could replace it with this:
你可以用这个替换它：
ul li {
margin-top: 1em;
}
ul li:first-child {
margin-top: 0;
}
This will work well for some other cases like borders.
这将适用于其他一些情况，如边界。
According to sitepoint, :first-childbuggy, but only to the extent that it will select some root elements (the doctype or html), and may not change styles if other elements are inserted.
根据sitepoint，:first-childbuggy，但仅限于它会选择一些根元素（doctype 或 html），并且如果插入其他元素可能不会改变样式。
回答by mikemaccana
2015 Answer: CSS last-of-typeallows you to style the last item.
2015 答案：CSS last-of-type允许您设置最后一项的样式。
ul li:last-of-type { color: red; }
回答by vise
I usually do this by creating a htc file (ex. last-child.htc):
我通常通过创建一个 htc 文件（例如 last-child.htc）来做到这一点：
<attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() {
this.lastChild.className += ' last-child';
}
</script>
And call it from my IE conditional css file with:
并从我的 IE 条件 css 文件中调用它：
ul { behavior: url("/javascripts/htc/last-child.htc"); }
ul { behavior: url("/javascripts/htc/last-child.htc"); }
Whereas in my main css file I got:
而在我的主 css 文件中，我得到了：
ul li:last-child,
ul li.last-child {
/* some code */
}
Another solution (albeit slower) that uses your existent css markup without defining any .last-child class would be Dean Edwards ie7.jslibrary.
另一个使用现有 css 标记而不定义任何 .last-child 类的解决方案（尽管速度较慢）是 Dean Edwards ie7.js库。
回答by Lawrence
:last-child is CSS3 and has no IE support while :first-child is CSS2, I believe the following is the safe way to implement it using jquery
:last-child 是 CSS3，没有 IE 支持，而 :first-child 是 CSS2，我相信以下是使用 jquery 实现它的安全方法
$('li').last().addClass('someClass');
回答by jaeson
$('li').last().addClass('someClass');
$('li').last().addClass('someClass');
if you have multiple
如果你有多个
回答by strager
If you know there are three li's in the list you're looking at, for example, you could do this:
例如，如果您知道正在查看的列表中有 3 个 li，则可以执行以下操作：
li + li + li { /* Selects third to last li */
}
In IE6 you can use expressions:
在 IE6 中，您可以使用表达式：
li {
color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */
}
I would recommend using a specialized class or Javascript (not IE6 expressions), though, until the :last-childselector gets better support.
不过，我建议使用专门的类或 Javascript（不是 IE6 表达式），直到:last-child选择器得到更好的支持。
