CSS :only-child 偽類選擇器入門指南:新手必讀

更新日期: 2024 年 10 月 22 日

當我們在設計網頁時,經常需要根據元素在 DOM 結構中的位置,來應用特定樣式。

CSS 提供了多種偽類選擇器,來幫助我們精準選取元素,其中一個有用的選擇器是 :only-child

這個偽類選擇器,允許我們選取某個父元素中唯一的子元素。

這篇文章將介紹 :only-child 偽類選擇器的基本用法,並通過範例幫助你理解它的應用場景。

什麼是 :only-child 偽類選擇器?

CSS 的 :only-child 偽類選擇器用來選取一個元素,當且僅當該元素,是其父元素中的唯一子元素時,才會被選中並應用樣式。

換句話說,如果某個元素在其父元素中,沒有任何其他兄弟元素,它就會被 :only-child 選擇器選取。

基本語法

selector:only-child {
  /* 樣式規則 */
}
  • selector:要應用樣式的元素選擇器。
  • :only-child:當這個元素是父元素的唯一子元素時,才會應用樣式。

:only-child 的基本範例

假設我們有一個段落 <p> 元素,它是父元素唯一的子元素,我們可以使用 :only-child 來給這個段落應用特定的樣式。

HTML

<div>
  <p>我是唯一的子元素</p>
</div>

<div>
  <p>我是第一個段落</p>
  <p>我是第二個段落</p>
</div>

CSS

p:only-child {
  color: red;
}

結果

在這個範例中,只有第一個 <p> 元素會被選中並應用紅色字體,因為它是它父元素中唯一的子元素。

而第二個 <div> 中的 <p> 元素,由於有多個兄弟元素,不會應用這個樣式。

:only-child 的應用場景

用於列表元素的樣式控制

假設你有一個列表,有時候列表中可能只會有一個項目。

你可以使用 :only-child 來為唯一的列表項目設置不同的樣式:

HTML

<ul>
  <li>只有一個項目</li>
</ul>

<ul>
  <li>項目 1</li>
  <li>項目 2</li>
</ul>

CSS

li:only-child {
  font-weight: bold;
}

結果

第一個列表中的唯一項目將變為粗體,因為它是 ul 元素的唯一子元素,而第二個列表則不會受到影響。

用於表單元素的樣式調整

你可以用 :only-child 來控制表單中的某些元素,當表單只有一個輸入框時,給它特別的樣式。

HTML

<form>
  <input type="text" placeholder="唯一的輸入框">
</form>

<form>
  <input type="text" placeholder="輸入框 1">
  <input type="text" placeholder="輸入框 2">
</form>

CSS

input:only-child {
  border: 2px solid blue;
}

結果

只有第一個表單中的輸入框會有藍色的邊框,因為它是表單中唯一的子元素,而第二個表單中的輸入框不會受到影響。

為文章段落設置特定樣式

在網頁設計中,你可能希望為某篇文章中的唯一段落設置不同的樣式,讓它更加顯眼:

HTML

<div class="article">
  <p>這篇文章只有一個段落。</p>
</div>

<div class="article">
  <p>這是第一段。</p>
  <p>這是第二段。</p>
</div>

CSS

.article p:only-child {
  background-color: lightyellow;
  padding: 10px;
}

結果

只有在第一篇文章中的段落會有淡黃色背景和額外的內距,因為它是唯一的段落,而第二篇文章則不會受到這個樣式的影響。

:only-child 的常見誤解

  1. 適用於任何子元素類型:only-child 適用於任何類型的子元素,無論是段落、列表項目還是輸入框。

    只要某個元素是父元素的唯一子元素,它就可以被 :only-child 選取。
  2. 父元素必須只有一個子元素:這是最常見的誤解。

    有些人以為只要有一個「特定類型」的子元素,就會匹配 :only-child

    實際上,父元素必須只包含一個「單一」的子元素,不能有任何其他兄弟元素。

錯誤範例

<div>
  <h1>標題</h1>
  <p>段落 1</p>
</div>

如果你寫:

p:only-child {
  color: red;
}

這段 CSS 不會對段落 p 元素生效,因為 p 不是父元素中的唯一子元素(h1 也存在)。

:only-child 與其他偽類選擇器的比較

:only-of-type

:only-child:only-of-type 的區別在於,:only-child 選擇的是父元素中唯一的子元素,而 :only-of-type 則選擇父元素中某一類型的唯一元素。

換句話說,:only-of-type 只考慮元素的類型,而 :only-child 則考慮整體結構。

範例

<div>
  <h1>標題</h1>
  <p>段落</p>
</div>
p:only-of-type {
  color: green;
}

在這裡,即使 p 不是唯一的子元素,它仍然會被選中,因為它是唯一的段落元素(p 是該類型唯一的元素)。

瀏覽器支援

:only-child 是一個被廣泛支援的偽類選擇器。它在所有現代瀏覽器中均有良好的支持,包括 Chrome、Firefox、Safari、Edge 和 IE9 及更高版本。

結論

CSS 的 :only-child 偽類選擇器是一個非常實用的工具,特別是在你需要針對父元素中唯一的子元素應用樣式時。

它能夠幫助你快速且精準地選取那些不與其他兄弟元素共存的子元素,從而實現更靈活的樣式控制。

希望這篇文章能幫助你掌握 :only-child 的基本概念與用法,讓你在網頁設計時更加得心應手!

Similar Posts