CSS last-child(-1)

Posted 2023-03-06

【中文标题】CSS last-child(-1)

【英文标题】：

【发布时间】：2012-03-02 22:21:01

【问题描述】：

我正在寻找一个 css 选择器，它可以让我选择列表的最后一个子项。

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

静态方法：

ul li:nth-child(5)

动态方法：

ul li:last-child(-1)

这当然没有验证，nth-last-child 似乎也没有提供动态方式。我可以回退到 javascript，但我想知道是否有我忽略的 css 方式

【问题讨论】：

通常称为“倒数第二”。它还有另一个花哨的词：“倒数第二个”。

@BoltClock 我喜欢“倒数第二个”这个词。我现在要在一个恶作剧的 Facebook 更新中使用它。

Select second last element with css的可能重复

感谢大家提到倒数第二个 - 这在 Google 上以“css penultimate”排名第一。

【参考方案1】：

你可以使用:nth-last-child()；事实上，除了:nth-last-of-type()，我不知道你还能用什么。我不确定您所说的“动态”是什么意思，但如果您的意思是当更多孩子添加到列表中时该样式是否适用于新的倒数第二个孩子，是的。 Interactive fiddle.

ul li:nth-last-child(2)

【讨论】：

好的，行得通！代码解释器（jsfiddle）没有验证它。猜猜他们这边的错误！谢谢

@David Allen：我认为他不在乎他是否已经在尝试使用:nth-child(5) 和:last-child。像这样的评论应该继续提出问题或保持自我。

他可能不知道不支持的问题。我只是强调它....我使用 jQuery 给出了一个答案，我很高兴地说它不适用于禁用 JavaScript 的用户。但是使用 IE7/8 的人比禁用 JS 的人多

@David，我相信 selectivrz 或 modernizr 插件可以解决这个问题，我必须查看文档

@ArgsKwargs 很棒的评论从未听说过 selectivizr。让我们知道它是否支持 nth-last-child

【参考方案2】：

除非你可以让 php 用一个类来标记那个元素，否则你最好使用 jQuery。

jQuery(document).ready(function () 
  $count =  jQuery("ul li").size() - 1;
  alert($count);
  jQuery("ul li:nth-child("+$count+")").css("color","red");
);

【讨论】：

jQuery 没有实现:nth-last-child() 只是因为John thinks nobody uses it，这真是令人讨厌。

我宁愿用 python 标记 ;-) ontopic: 嗯，css 这样看起来不错，也许 jsfiddle 也认为没有人使用它 :-)

@ArgsKwargs：奇怪为什么它在 jsFiddle 中不起作用。由浏览器来解释它；它没有自己的 CSS 引擎。

@BoltClock 不要误会我的意思，它确实有效，代码助手（颜色可视化）只是表示未关闭的东西（所以我什至没有尝试）

我认为没有任何代码是未封闭的。但我知道你所说的“颜色可视化”是什么意思