如何使用 CSS 選擇元素的所有子元素（除了最後一個子元素）？
- PHPz轉載
- 2023-09-16 08:45:072175瀏覽
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>First Child</h1>
<h2>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中文網其他相關文章！