:only-child
選擇器可以用於選中在父元素中唯一的子元素,用白話來說就是獨生子女元素,常用在只有一個子元素時,可以為該唯一的元素添加特殊的樣式。同樣地,:only-of-type
則是選擇特定類型中唯一的子元素。
💠:only-child
基本用法
語法
1 | 選擇器:only-child { |
- 選擇沒有兄弟的元素
範例
以下範例中,兩個 <div>
元素中分別有多個與一個 <p>
元素。當 <div>
中只有一個 <p>
元素時,該元素的文字會呈現紅色。
1 | <div> |
1 | p:only-child { |
💠:only-of-type
基本用法
語法
1 | 選擇器:only-of-type { |
- 選擇沒有同類型兄弟的元素
範例
在以下範例中,所有只有一個類型的子元素,文字會呈現紅色。
1 | <div> |
1 | div :only-of-type { |
💠 實務應用:突顯單篇文章
在部落格中,當文章列表中只有一篇文章時,可以透過 :only-child
為其添加特殊的邊框或調整字體大小,以突出這篇文章。
1 | <h2>當只有一篇文章時</h2> |
1 | .article-list { |
See the Pen only-child by Lala (@bobee) on CodePen.
當文章列表中只有一篇文章時,:only-child
會生效,將文章的邊框顏色改為綠色,字體大小調整為 20px,並改變背景色,讓該文章更加突出,從而自動調整排版,避免畫面過於空曠並提升視覺效果。
💠 總結
:only-child
和 :only-of-type
選擇器在 CSS 中提供了強大的樣式應用能力,特別是在處理獨特元素時。利用這些選擇器,我們可以在特定情況下,針對唯一子元素進行樣式調整,從而增強用戶介面的可讀性和吸引力。
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。