如何使用 CSS 選擇元素的所有子元素（除了最後一個子元素）？-css教學-PHP中文網

首頁

web前端

css教學

如何使用 CSS 選擇元素的所有子元素（除了最後一個子元素）？

PHPz

Sep 16, 2023 am 08:45 AM

如何使用 CSS 选择元素的所有子元素（除了最后一个子元素）？

CSS 是常用的網頁樣式。在開發網頁應用程式時，我們有時需要對不同的元素應用不同的樣式。這個常見的要求是選擇一個元素的所有子元素，除了最後一個子元素！應用 CSS 可以選擇元素的所有子元素（除了最後一個子元素）。

在本文中，我們將了解如何使用不同的方法在 CSS 中選擇除最後一個子元素之外的所有子元素。我們將詳細討論每種方法及其語法，以及幫助您理解它們如何運作的範例。

第一種選擇除最後一個之外的所有子元素的方法涉及使用 :not() 選擇器，它允許您選擇與特定選擇器不匹配的所有元素。第二種方法涉及使用 :nth-last-child() 選擇器，它選擇從父元素末尾算起的第 n 個子元素的所有元素。在此方法中，我們指定 n 2 參數，該參數有助於選擇元素的所有子元素（HTML 中最後一個子元素除外）。

這兩種方法在開發 Web 應用程式時都非常有用，它們可能有助於實作網頁所需的 UI。使用上面討論的選擇器可以幫助我們了解這些選擇器是如何運作的，並且我們可以為我們的網頁建立功能和 UI 的自訂樣式。

方法 1：使用 :not 選擇器

- not 選擇器是一個功能強大的 CSS 選擇器，它允許您選擇除匹配特定條件的元素之外的所有元素。要選擇除最後一個子元素之外的所有子元素，我們可以將 :not 選擇器與 :last-child 選擇器結合使用。

要使用 - not() 選擇器選擇元素的所有子元素（最後一個子元素除外），我們將其與 :last-child 選擇器一起使用。 :last-child 選擇器有助於選擇元素的最後一個子元素。透過對兩個選擇器使用這種方法的組合，我們可以選擇元素的所有子元素，除了最後一個子元素。

以下是如何使用 :not() 選擇器選擇父元素的所有子元素（最後一個子元素除外）的語法 -

文法

在下面的語法中，.parent 是父元素的選擇器，> 選擇其所有直接子元素，* 選擇所有子元素，:not(:last-child) 從選擇中排除最後一個子元素。

.parent > *:not(:last-child) {
  /* styles for all children except the last one */
}

範例

在此範例中，CSS 選擇器.parent > *:not(:last-child) 選擇.parent 類別元素的所有直接子元素（即h1、h2、p 和span 元素），除了最後一個子元素，即元素。使用 CSS，我們將「color」屬性應用於 .parent 元素的前三個子元素（即 h1、h2 和 p 元素），而第四個子元素（即元素）不會受到影響。跨度>跨度>

#現在讓我們來看看如何將 CSS 程式碼套用到 HTML 頁面的程式碼 -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:not(:last-child) {
            color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <h1 id="First-Child">First Child</h1>
         <h2 id="Second-Child">Second Child</h2>
         <p>Third Child</p>
         <span>Fourth Child</span>
      </div>
   </body>
</html>

方法 2：使用:nth-last-child() 選擇器

- nth-last-child() 選擇器是 CSS 中另一個實用的工具，它允許您根據元素在元素子元素清單中的位置來選擇元素。我們可以使用它來選擇除最後一個之外的所有子項，方法是使用 :nth-last-child(n 2) 選擇除最後一個子項之外的所有子項。

要使用 :nth-last-child() 選擇器選擇除最後一個子元素之外的所有子元素，我們可以指定 n 2 參數。定義的參數使用 CSS 選擇 HTML 的所有元素，最後一個子元素除外，它是倒數第一個子元素。

以下是如何使用 :nth-last-child() 選擇器選擇父元素的所有子元素（最後一個子元素除外）的語法 -

文法

在下面的語法中，.parent 是父元素的選擇器，> 選擇其所有直接子元素，* 選擇所有子元素，:nth-last-child(n 2) 選擇除最後一個之外的所有子元素孩子。

.parent > *:nth-last-child(n+2) {
   /* styles for all children except the last one */
}

範例

在此範例中，CSS 選擇器 .parent > *:nth-last-child(n 2) 選擇 .parent 類別元素的所有直接子元素，最後一個子元素除外。在這裡，.parent 元素內的所有按鈕元素都會被選擇，但不會選擇最後一個按鈕元素。

多個 CSS 屬性已套用於前三個按鈕，但 CSS 樣式不會新增到最後一個子按鈕。

現在讓我們來看看如何將 CSS 程式碼套用到 HTML 頁面的程式碼 -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:nth-last-child(n+2) {
            background-color: green;
            padding: 10px;
            color: white;
            border-radius: 10px;
            width: 10em;
            text-decoration: none;
            font-family: sans-serif;
            border: none;
         }
      </style>
   </head>
   <body>
      <div class="parent">
      <button>First</button>
      <button>Second</button>
      <button>Third</button>
      <button>Fourth</button>
   </div>
   </body>
</html>

结论

在本文中，我们了解了如何使用不同的方法选择元素的所有子元素（除了最后一个子元素）。在 CSS 选择器的帮助下，选择子项是一个轻松的过程，因为它提供了多个可用于执行此任务的选择器，例如 :not() 选择器和 :nth-last-child() 选择器。上面讨论的两个示例都展示了 CSS 在将不同样式应用于元素的所有子元素（最后一个元素除外）方面的作用。这两个选择器都可以帮助我们轻松地将不同的 CSS 样式应用于不同的 HTML 元素，不仅如此，它还有助于轻松创建动态网站。

以上是如何使用 CSS 選擇元素的所有子元素（除了最後一個子元素）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除