使用CSS选择倒数第二个元素

Question

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

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

注意：没有 jQuery，只有 CSS

原文由 dynamic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 CSS3 中你有：

 :nth-last-child(2)

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

nth-last-child 浏览器支持：

• 铬 2
• 火狐 3.5
• 歌剧 9.5、10
• 野生动物园 3.1、4
• 浏览器 9

原文由 Maxime Pacary 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

---

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

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

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

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

• :nth-child 浏览器支持

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

原文由 kapa 发布，翻译遵循 CC BY-SA 4.0 许可协议