在 CSS 中選擇非第一個子元素的方法

Ashok Chapagai 2023年2月20日 2021年12月20日
  1. 使用 :not(selector) 選擇器不選擇 CSS 中的第一個子元素
  2. 在 CSS 中使用 :first-child 選擇器單獨設定第一個子元素的樣式,不要選擇第一個子元素
在 CSS 中選擇非第一個子元素的方法

在本文中,我們將學習如何利用 CSS 選擇器不選擇第一個子元素的方法。

使用 :not(selector) 選擇器不選擇 CSS 中的第一個子元素

我們可以使用 :not(selector) 選擇器來選擇不是被選元素的所有其他元素。所以,我們可以使用選擇器不選擇 CSS 中的第一個子元素。我們可以使用 :first-child 作為 :not(selector) 選擇器中的選擇器。通過這種方式,我們可以將樣式應用於元素的所有後代,但第一個除外。在這裡,在支援 CSS Selectors level 3 的瀏覽器中,我們可以使用 :not 選擇器。

例如,在 HTML 中建立 body 標籤。然後,編寫三個 p 標籤並在標籤之間編寫一些你選擇的內容。在 CSS 中,選擇 body p:not(:first-child) 並將 color 設定為 red

在這裡,在下面的程式碼段中,我們可以看到正文包含段落,並且除了第一個之外,所有段落的字型顏色都設定為紅色。因此,我們可以選擇除第一個子元素之外的所有子元素並應用樣式。然而,:not 選擇器有一定的侷限性(例如它只能將 simple selectors 作為引數處理)。

程式碼示例:

<body>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</body> 
body p:not(:first-child) {
    color: red;
}

在 CSS 中使用 :first-child 選擇器單獨設定第一個子元素的樣式,不要選擇第一個子元素

我們可以設定特定規則來覆蓋之前使用 :first-child 選擇器設定的規則。通過這種技術,我們可以為除第一個子元素之外的所有子元素設定樣式。使用 :first-child 選擇器覆蓋樣式將使第一個子元素看起來與其他子元素不同。

例如,使用與第一種方法相同的 HTML 結構。在 CSS 中,選擇 p 標籤並將 color 設定為藍色。接下來,選擇第一個子元素作為 body p:first-child,然後將 color 設定為 black

在這裡,除了第一個段落之外的段落的預設樣式設定為 color: blue,而它使用 :first-child 選擇器被 color: black 覆蓋。因此,我們可以使用 :first-child 選擇器來不選擇第一個子元素。

程式碼示例:

p{
    color:blue;
}
    body p:first-child {
    color: black;
}
<body>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</body> 
Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub