CSS 選擇器指南：first-child、last-child、nth-child() 與 nth-of-type() 的區別
更新日期： 2024 年 10 月 21 日
在撰寫 CSS 時，經常需要針對某些特定的元素進行樣式設置，特別是根據元素在其父級中的位置或類型。
CSS 提供了幾個強大的 Pseudo-classes（偽類）來幫助你選擇這些元素，其中最常見的就是 :first-child、:last-child、:nth-child() 和 :nth-of-type()。
雖然這些選擇器看似相似，但它們的應用場景和行為存在重要差異。
本文將詳細介紹這些選擇器，幫助新手理解它們的不同之處，以及如何在實際開發中正確使用它們。
什麼是 :first-child 和 :last-child？
:first-child
:first-child 用於選擇父級元素中的第一個子元素，無論該子元素是什麼類型。
語法：
父元素:first-child {
/* 樣式規則 */
}範例：
p:first-child {
color: blue;
}HTML：
<div>
<p>第一段文字</p>
<p>第二段文字</p>
</div>在這裡，第一個段落 p 會被選中並變成藍色。
:last-child
:last-child 用於選擇父級元素中的最後一個子元素，同樣不區分元素的類型。
語法：
父元素:last-child {
/* 樣式規則 */
}範例：
p:last-child {
color: red;
}HTML：
<div>
<p>第一段文字</p>
<p>最後一段文字</p>
</div>在這裡，最後一個段落 p 會被選中並變成紅色。
什麼是 :nth-child() 和 :nth-of-type()？
:nth-child()
:nth-child() 用於根據元素在父級中的位置來選擇特定子元素，這個位置包括所有類型的元素。例如，你可以選擇父級中的第二個或第三個子元素，無論它們是 p、div 還是 span。
語法：
父元素:nth-child(n) {
/* 樣式規則 */
}n可以是具體數字（例如2），也可以是表達式（例如2n表示每隔一個選擇一個元素）。
範例：
li:nth-child(2) {
color: green;
}HTML：
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>在這個範例中，nth-child(2) 會選擇第二個 li 元素並將其文字顏色變為綠色。
:nth-of-type()
:nth-of-type() 用於根據同類型的元素順序來選擇特定的子元素。
與 :nth-child() 不同，:nth-of-type() 只會根據同一類型的元素來計算順序，而不會考慮其他類型的元素。
語法：
父元素:nth-of-type(n) {
/* 樣式規則 */
}n可以是具體數字（例如2），也可以是表達式（例如2n表示每隔一個選擇一個元素）。
範例：
p:nth-of-type(2) {
color: blue;
}HTML：
<div>
<p>第一段文字</p>
<span>這是其他元素</span>
<p>第二段文字</p>
<p>第三段文字</p>
</div>在這裡，:nth-of-type(2) 會選擇第二個 p 元素，而不會考慮 span 元素。
這意味著即使第二個子元素是 span，它也不會影響對第二個 p 的選擇。
:first-child、:last-child 與 :nth-child()、:nth-of-type() 的區別
雖然這些選擇器看似相似，但它們在選擇元素時的行為存在明顯區別。
:first-child 和 :last-child 的行為
first-child：僅選擇父級元素中的第一個子元素，不區分元素的類型。last-child：僅選擇父級元素中的最後一個子元素，無論其類型。
這意味著，如果一個父級元素內有多種類型的子元素，如 span 和 li 混合存在時，first-child 和 last-child 會根據所有子元素的順序來選擇。
範例：
<ul class="child">
<span></span>
<li>item</li>
<li>item</li>
</ul>在這個範例中，li:first-child 會無效，因為第一個子元素實際上是 span，而不是 li。
:nth-child() 與 :nth-of-type() 的行為
nth-child()：基於父級中所有子元素的順序進行選擇，不考慮元素的類型。nth-of-type()：只選擇同一類型的元素，不管這些元素是否是父級中的第幾個子元素。
範例：
li:nth-child(2) {
color: red;
}在上面的 HTML 結構中，li:nth-child(2) 不會選擇第二個 li，因為它實際上是父級的第三個子元素（因為第一個元素是 span）。
相對的，使用 nth-of-type() 可以解決這個問題：
li:nth-of-type(2) {
color: red;
}這樣，會選擇第二個 li 元素，無論它是不是父級中的第二個子元素。
使用場景與建議
使用 :first-child 和 :last-child 的場景
當你需要選擇一個容器內的第一個或最後一個子元素時，不論其類型，使用 :first-child 和 :last-child 是合適的。
例如：
/* 選擇第一個子元素 */
div:first-child {
background-color: yellow;
}
/* 選擇最後一個子元素 */
div:last-child {
background-color: red;
}使用 :nth-child() 的場景
如果你想選擇父級中所有子元素中的特定位置，無論它們的類型是什麼，使用 :nth-child() 是最佳選擇。
例如：
/* 選擇父級中的第三個子元素 */
ul li:nth-child(3) {
color: green;
}使用 :nth-of-type() 的場景
當你只希望針對某一類型的元素進行選擇時（例如只針對所有 p 元素），使用 :nth-of-type() 可以避免其他類型的元素干擾。
例如：
/* 選擇父級中的第二個段落（p）元素 */
p:nth-of-type(2) {
font-weight: bold;
}結語
理解 :first-child、:last-child、:nth-child() 和 :nth-of-type() 之間的區別，對於靈活應用 CSS 選擇器非常重要。
這些選擇器在處理父級內部，不同類型和位置的子元素時，提供了強大的控制能力。
無論是基於子元素的順序還是類型，你都可以使用這些選擇器，精確地選擇並應用樣式，從而讓你的網頁設計更具靈活性和可控性。