如何选择CSS中的倒数第二个元素？

倒数第二个元素的 CSS 选择器

使用 CSS 时，通常根据元素在父元素中的位置来选择元素。虽然 :last-child 是选择最后一个元素的常用选择，但有没有办法选择最后一个元素之前的元素？

要实现此目的，您可以使用 :nth-last-child 选择器在 CSS3 中。它的工作原理如下：

<code class="css">:nth-last-child(2) {
  /* Styling for the second last child */
}</code>

在此示例中，:nth-last-child(2) 选择器将匹配距离其父元素末尾第二个的元素。在指定的 HTML 中，它将选择以下元素：

<code class="html"><div>SELECT THIS</div></code>

这是应用了适当选择器的 HTML 的更新版本：

<code class="html"><div id="container">
  <div>a</div>
  <div>b</div>
  <div class="second-last">SELECT THIS</div>
  <div>c</div>
</div></code>

<code class="css">#container .second-last {
  /* Styling for the second last child of #container */
  background-color: lightblue;
}</code>

支持的浏览器:nth-last-child 包括：

• Chrome 2
• Firefox 3.5
• Opera 9.5 , 10
• Safari 3.1 , 4
• Internet Explorer 9

以上是如何选择CSS中的倒数第二个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！