在 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>