更改最后一个 <li> 的 CSS

Posted 2023-03-06

【中文标题】更改最后一个 <li> 的 CSS

【英文标题】：Changing CSS for last <li>

【发布时间】：2010-11-22 17:23:17

【问题描述】：

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

【问题讨论】：

我很好奇：你为什么需要这个？

您好，strager：我正在制作一个导航栏，并希望最后一个元素的属性与其余元素不同。

【参考方案1】：

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

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

【参考方案2】：

您可以使用jQuery 并这样做

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

【参考方案3】：

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

【讨论】：

迄今为止最干净的解决方案（如果明显支持）。

选择器的作用是“ul#nav li:last-child span”有效，而“#nav li:last-child span”无效。虽然从技术上讲两者都指向同一个元素，但第一个更具体。向“来自未来的人”致敬

+1 表示“来自未来的人” ;) - 虽然严格来说，两年后你是过去的人：P

但是因为他是在 2 年前写的，并不意味着他不是来自未来，而是来自未来有过去的人 :)

【参考方案4】：

: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 实现 - 所以它应该更少错误并且跨浏览器更可靠。

【讨论】：

很高兴您在我发布后将我的答案合并到您的答案中。

抱歉 - 我正在发布与我已经发布的原型代码等效的 JQuery。如果您愿意，我可以编辑 JQuery 部分。

没问题。我实际上是说它至少验证了我如何做到这一点。

再次抱歉造成误会:)。从技术上讲，您的代码要好 10 倍 - 它确实有效！ （错字将在 10..9.. 中修复）

jQuery 确实让浏览器处理选择，如果它理解 :last-child。

【参考方案5】：

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

如果你有多个

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

【参考方案6】：

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

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

【参考方案7】：

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

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

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

【讨论】：

只是一个小修正， :last-child 在 IE7 上也不起作用。

【参考方案8】：

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 buggy，但仅限于选择一些根元素（doctype 或 html），如果插入其他元素，可能不会改变样式。

【参考方案9】：

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

【参考方案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 选择器获得更好的支持。