用css选择倒数第二个元素

Posted 2023-03-06

【中文标题】用css选择倒数第二个元素

【英文标题】：Select second last element with css

【发布时间】：2011-07-22 02:00:02

【问题描述】：

我已经知道 :last-child。但是有没有办法选择div：

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

注意：没有 jQuery，只有 CSS

【问题讨论】：

为什么倒数第二个孩子很重要肯定有一些逻辑？

是的，我需要同时选择倒数和倒数来应用一些样式

为什么你不能把一个类放在倒数第二个 div 上

“为什么你不能在倒数第二个 div 上放一个类”：也许如果你要对正在生成的内容进行样式化，在其中你没有（容易）访问添加一个分类到倒数第二项？

【参考方案1】：

在 CSS3 中你有：

:nth-last-child(2)

见：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

nth-last-child 浏览器支持：

铬 2 火狐3.5 Opera 9.5、10 Safari 3.1、4 Internet Explorer 9

【讨论】：

这可能是要走的路，除非您可以将一个类附加到您尝试选择的 div。正如 Frosty 所提到的，旧版浏览器或 IE 不支持 CSS3。如果您关心跨浏览器的可计算性，Jquery 是一个更好的选择。

这是链接文章的复制/粘贴...已编辑答案，谢谢。

css 中的解决方案：#container > :nth-last-child(2) background: red; 请查看此代码笔以实时查看：codepen.io/marc_dahan/pen/JyxObz

既然我们不需要支持旧版 IE，这个答案就可以完美运行。老实说，如果人们还在使用 IE 8 及以下版本，他们就不配拥有漂亮的东西。

【参考方案2】：

注意：发布此答案是因为 OP 后来在 cmets 中声明他们需要选择最后两个元素，而不仅仅是倒数第二个元素。

---

:nth-child CSS3 选择器实际上比你想象的更强大！

例如，这将选择#container的最后2个元素：

#container :nth-last-child(-n+2) 

但这只是美好友谊的开始。

:nth-child Browser Support

#container :nth-last-child(-n+2) 
  background-color: cyan;

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>

【讨论】：

不错，我的答案只选择了最后一个孩子减1。不知道这个。 +'d