資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 CSS 中使用 :not(:first-child) 選擇器？
CSS 中有很多選擇器，其中 :not(:first-child) 選擇器非常實用。我們可以透過組合使用:not 和 :first-child 選擇器輕鬆實現這一點。
例如，如果您想選擇 div 元素中除第一個段落之外的所有段落，可以使用 div :not(:first-child) 選擇器。在本文中，我們將學習如何在 CSS 中使用 :not(:first-child) 選擇器。我們將探討使用 :not(:first-child) 選擇器的不同方法。
使用 :not(:first-child) 選擇器的不同方法
如下所述，在 CSS 中使用 :not(:first-child) 選擇器的方法有很多種。
選擇元素的除第一個子元素之外的所有子元素
我們將選擇元素的除第一個子元素之外的所有子元素。在這種方法中，我們將使用 :not(:first-child) 選擇器，該選擇器選擇除元素的第一個子元素之外的所有子元素。我們可以透過編寫元素選擇器後跟 :not(:first-child) 偽類來簡單地使用此選擇器。請參見下面的語法。
語法
以下是選擇 div 容器中除第一個 p 元素之外的所有 p 元素的語法。
div p:not(:first-child) {
/* Add all the CSS styles for all p
elements except the first one */
}
示例
在給定的示例中，我們選擇的是除元素的第一個子元素之外的所有子元素。這裡除了第一個 p 元素之外，所有 p 元素都將具有在<style>標籤下定義的 CSS 樣式。
<html>
<head>
<style>
div p:not(:first-child) {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>
Using not:first-child selector to select
all children except the first child of
an element
</h2>
<div>
<p>Welcome to Tutorialspoint!</p>
<p>
At tutorialspoint, 40 million readers read
million pages every month.
</p>
<p>
Our Text Library Content and resources are
freely available and we prefer to keep it that
way to encourage our readers to accquire as many
skills as they would like to.
</p>
</div>
</body>
</html>
選擇元素的除第一個兄弟元素之外的所有兄弟元素
我們將選擇元素的除第一個兄弟元素之外的所有兄弟元素。在這種方法中，:not(:first-child) 選擇器用於選擇元素的除第一個兄弟元素之外的所有兄弟元素。與第一種方法相比，如果我們想將樣式應用於元素的所有兄弟元素（第一個除外），則此方法很有用。我們可以透過編寫元素兄弟元素的選擇器後跟 :not(:first-child) 偽類來實現此目的。請參見下面的語法。
語法
以下是選擇<ol>列表內的所有 li 元素（不是其父元素的第一個子元素）的語法，因為它允許將特定的 CSS 樣式應用於除第一個 li 元素之外的所有 li 元素。
ul li:not(:first-child) {
/* Add all the CSS styles for all li
elements except the first one */
}
示例
在給定的示例中，我們選擇的是除元素的第一個兄弟元素之外的所有兄弟元素，即 <li>。除了第一個<li>元素之外，所有其他 <li> 元素都將具有在 <style> 標籤下定義的 CSS 樣式。
<html>
<head>
<style>
ul li:not(:first-child) {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h2>
Using not:first-child selector to select
all siblings except the first sibling of
an element
</h2>
<div>
<ul>
<li>
Learn how to do data structures.
</li>
<li>
Learn how to do algorithms.
</li>
<li>
Learn how to do competitive programming.
</li>
</ul>
</div>
</body>
</html>
選擇除其父元素的第一個子元素之外的所有元素
我們將選擇除其父元素的第一個子元素之外的所有元素。我們可以使用萬用字元選擇器 * 後跟 :not(:first-child) 選擇器。到目前為止，我們已經看到了上述兩種方法，當我們想要將樣式應用於頁面上的所有元素（其父元素的第一個子元素除外）時，此方法很有用。請參見下面的語法瞭解更多詳細資訊。
語法
以下是選擇頁面上不是其父元素的第一個子元素的所有元素的語法。這使我們可以將特定樣式應用於其父元素的第一個子元素之外的所有元素。
*:not(:first-child) {
/* Add all the CSS styles for all elements
except for the first child of their parent */
}
示例
在給定的示例中，我們將選擇頁面上除其父元素的第一個子元素之外的所有元素，這些元素將具有某些樣式。這裡，除父元素的第一個子元素之外的所有元素都將具有在 <style> 標籤下定義的 CSS 樣式。
<!DOCTYPE html>
<html>
<head>
<style>
/* Remove :not(:first-child) from below code to check */
*:not(:first-child) {
margin: 10;
border: 2px solid blue;
}
</style>
</head>
<body>
<h4>
Using not:first-child selector to
select all children except the first
child of an element
</h4>
<div>
<p>Welcome to Tutorialspoint!</p>
<p>Simply Easy Learning</p>
<p>
Text Library Content and resources are
freely available and we prefer to keep
it that way to encourage our readers
acquire as many skills as they would like to.
</p>
</div>
<ul>
<li>Learn HTML, CSS and JavaScript</li>
<li>Learn Data Structure and Algorithm</li>
<li>Learn Data Science and Machine Learning</li>
</ul>
</body>
</html>
結論
我們學習瞭如何在 CSS 中使用 :not(:first-child) 選擇器。我們已經看到，:not(:first-child) 選擇器是兩個不同選擇器的非常強大的組合，用於設定網頁樣式。這使我們可以選擇除其父元素的第一個子元素之外的所有元素，從而更容易地定位特定元素。
瀏覽量：181
