資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究CSS 中 :first-child 和 :first-of-type 選擇器的區別
層疊樣式表 (CSS) 是一種用於在網頁開發過程中為網頁設定樣式的基本語言。它使開發人員能夠自定義佈局並新增視覺效果。
CSS 選擇器是一種重要的工具，它允許開發人員選擇或匹配 HTML 元素並向其應用樣式。:first-child 和 :first-of-type 是最常用的選擇器，開發人員經常會混淆它們。有些人可能錯誤地將它們互換使用。
雖然當應用於元素時它們看起來非常相似，但它們之間存在一些差異，這些差異可能會影響您的網頁設計（如果使用不當）。在本文中，我們將討論這兩個選擇器，它們的工作原理以及它們之間的區別。
:first-child 選擇器類
:first-child 選擇器是偽類 CSS 選擇器，它選擇或匹配父元素的第一個子元素。這可以防止開發人員為父元素中的每個元素分配類或 ID。
語法
element:first-child {
CSS declarations;
}
示例
假設您想在以下示例中為 div 元素的第一個子元素新增特定樣式：
<html>
<head>
<style>
* {
margin: 10px;
padding: 3px;
}
p:first-child {
color: red;
font-size: 19px;
}
</style>
</head>
<body>
<h1> :first-child Selector </h1>
<div>
<p> First child of the div element. </p>
<p> Second child of the div element. </p>
<p> Third child of the div element. </p>
</div>
</body>
</html>
在上面的示例中，我們使用 p:first-child 選擇所需的元素，並將其文字設定為紅色。
:first-of-type 選擇器類
:first-of-type 是一個偽類 CSS 選擇器，它選擇或匹配其父元素內特定型別的第一個子元素。這裡，子元素的型別是決定因素。
語法
element:first-of-type {
CSS declarations;
}
示例
假設您想應用特定樣式到第一個，您可以按照以下步驟操作：
<html>
<head>
<style>
* {
margin: 10px;
padding: 3px;
}
h2:first-of-type {
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<h1> :first-of-type Selector </h1>
<div>
<p> First child of the div element. </p>
<h2> First-of-type element </h2>
<p> Third child of the div element. </p>
<p> Fourth child of the div element. </p>
</div>
</body>
</html>
在上面的示例中，我們使用 h2:first-of-type 選擇父 div 元素的第一個 h2 子元素。第一個 h2 子元素為綠色並帶下劃線。在這裡，我們可以清楚地看到，first-of-type 元素不是父 div 元素的第一個子元素。讓我們深入瞭解它們之間的區別。
:first-child 和 :first-of-type 選擇器之間的區別
這兩個選擇器之間的主要區別在於，:first-child 選擇器用於選擇元素的第一個子元素，而不管其型別、類或 ID 如何。
而 :first-of-type 選擇器用於選擇特定型別的第一個子元素，該型別由其標籤名稱（如 h2、h3、p 等）在其父元素中表示。
:first-child 也可以是 :first-of-type 元素。讓我們舉個例子。
<div> <p> Child 1 </p> <!-- First child of div element and p:first-of-type element--> <p> Child 2 </p> <p> Child 3 </p> <p> Child 4 </p> </div>
這裡，Child 1 是 div 元素的第一個子元素。此外，它是父 div 元素中 p 型別的第一個元素。
但是，:first-of-type 子元素並不總是父元素的 :first-child。當您更改子元素的型別時，就會發生這種情況。請參閱以下示例。
<div> <p> Child 1 </p> <!-- p:first-child of div element and p:first-of-type --> <h3> Child 2 </h3> <!-- h3:first-of-type element --> <p> Child 3 </p> <p> Child 4 </p> </div>
這裡，Child 1 是 div 元素的第一個子元素。Child 2 是 div 元素的第二個子元素，也是父 div 元素中 h3 型別的第一個子元素。
這意味著任何元素一次只能有一個 :first-child 元素。如果它包含不同型別的子元素，則它可以有多個 :first-of-type 子元素。讓我們看一個例子。
<div> <p> Child 1 </p> <!-- p:first-child element and p:first-of-type element --> <h3> Child 2 </h3> <!-- h3:first-of-type element --> <p> Child 3 </p> <p> Child 4 </p> <h2> Child 5 </h2> <!-- h2:first-of-type element --> <p> Child 6 </p> </div>
結論
在本文中，我們討論了 CSS 的兩個強大的選擇器，即 :first-child 和 :first-of-type。它們用於選擇網頁中的特定元素。雖然這兩個選擇器看起來相似，但它們執行不同的功能，並根據輸出進行使用。此處討論的概念也可以應用於 :last-child 和 :last-of-type 選擇器。透過理解這些選擇器的概念，您可以建立更具視覺吸引力和使用者友好的網站。
2K+ 次瀏覽
