用css选择倒数第二个元素答案

【问题标题】：Select second last element with css用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

【问题讨论】：

【解决方案1】：

在 CSS3 中你有：

:nth-last-child(2)

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) {}

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

#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>

【讨论】：