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 選擇元素的所有子元素（除了最后一個子元素）？的詳細內容，更多請關注www.92cms.cn其它相關文章！
