
:only-child
選擇器可以用於選中在父元素中唯一的子元素,用白話來說就是獨生子女元素,常用在只有一個子元素時,可以為該唯一的元素添加特殊的樣式。同樣地,:only-of-type
則是選擇特定類型中唯一的子元素。
💠:only-child
基本用法
語法
1 2 3
| 選擇器:only-child { 屬性名: 屬性值; }
|
範例
以下範例中,兩個 <div>
元素中分別有多個與一個 <p>
元素。當 <div>
中只有一個 <p>
元素時,該元素的文字會呈現紅色。
1 2 3 4 5 6 7 8 9
| <div> <p>第一個 P 元素</p> <p>第二個 P 元素</p> <p>第三個 P 元素</p> </div>
<div> <p>只有一個 P 元素</p> </div>
|
1 2 3
| p:only-child { color: red; }
|

💠:only-of-type
基本用法
語法
1 2 3
| 選擇器:only-of-type { 屬性名: 屬性值; }
|
範例
在以下範例中,所有只有一個類型的子元素,文字會呈現紅色。
1 2 3 4 5 6
| <div> <p>第一個 P 元素</p> <p>第二個 P 元素</p> <div>第一個 div 元素</div> <span>第一個 span 元素</span> </div>
|
1 2 3
| div :only-of-type { color: red; }
|

💠 實務應用:突顯單篇文章
在部落格中,當文章列表中只有一篇文章時,可以透過 :only-child
為其添加特殊的邊框或調整字體大小,以突出這篇文章。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <h2>當只有一篇文章時</h2> <div class="article-list"> <div class="article"> <h3>如何成為前端工程師</h3> <p>成為前端工程師需要具備多方面的技能,並且隨著技術發展持續學習</p> </div> </div>
<hr>
<h2>當有多篇文章時</h2> <div class="article-list"> <div class="article"> <h3>HTML5 新特性介紹</h3> <p>這篇文章將介紹 HTML5 的新特性,以及如何應用這些特性來提升網站的互動性。</p> </div> <div class="article"> <h3>CSS Flexbox 完整指南</h3> <p>本指南將深入解說 Flexbox 布局模型,幫助你打造更靈活的網頁排版。</p> </div> <div class="article"> <h3>JavaScript ES6 語法更新</h3> <p>這篇文章詳細講解了 ES6 版本中的 JavaScript 語法更新,並展示了常見的使用範例。</p> </div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| .article-list { display: flex; flex-direction: column; gap: 20px; }
.article { padding: 15px; border: 1px solid #bbb; font-size: 16px; background-color: #f2f2f2; }
.article:only-child { border: 2px solid #4caf50; font-size: 20px; background-color: #e8f5e9; }
|
See the Pen
only-child by Lala (@bobee)
on CodePen.
當文章列表中只有一篇文章時,:only-child
會生效,將文章的邊框顏色改為綠色,字體大小調整為 20px,並改變背景色,讓該文章更加突出,從而自動調整排版,避免畫面過於空曠並提升視覺效果。
💠 總結
:only-child
和 :only-of-type
選擇器在 CSS 中提供了強大的樣式應用能力,特別是在處理獨特元素時。利用這些選擇器,我們可以在特定情況下,針對唯一子元素進行樣式調整,從而增強用戶介面的可讀性和吸引力。
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。