如何選擇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
Internet Explorer 9

以上是如何選擇CSS中的倒數第二個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！