後代選擇器(Descendant Combinator)用於選擇特定元素中的所有子孫元素,無論是直接的子元素還是更深層次的後代。當你需要對一個範圍內的所有元素應用相同的樣式時,它非常實用。
你可以把它想像成一個大家族的聚會。如果你要找出爺爺的所有男性子孫來組成一支男子棒球隊,從大伯、爸爸、小叔、哥哥、弟弟到弟弟的兒子、弟弟兒子的兒子、弟弟兒子兒子的兒子…(太多了,夠了🤪),無論他們是哪一代,全部都會被揪出來,沒有人能躲過這個「後代選擇器」!
💠 後代選擇器-基本用法
語法
1 2 3
| 選擇器1 選擇器2 選擇器3 … 選擇器n { 屬性名: 屬性值; }
|
- 選擇器之間使用空格隔開,表示後面選擇器為前面選擇器的後代元素。
範例
範例一:選中所有 <ul>
內的 <li>
範例二:選中所有 <ul>
內的 <li>
內的 <a>
1 2 3
| ul li a { color: gold; }
|
範例三:選中 dog 類別內的 <li>
1 2 3
| .dog li { color: green; }
|
範例四:選中 dog 類別內且類別為 cute 的 <li>
1 2 3
| .dog li.cute { color: green; }
|
💠 實務應用:選單樣式
在設計選單樣式時,如果所有的子選單樣式都一樣,我們可以直接使用 .menu a
來選中 menu
元素裡的所有 <a>
元素。這種方式既簡潔又易於維護。
1 2 3 4 5 6 7 8 9 10 11
| <ul class="menu"> <li> <a href="/">關於我們</a> </li> <li> <a href="/">產品介紹</a> </li> <li> <a href="/">聯絡我們</a> </li> </ul>
|
1 2 3 4 5 6 7 8
| .menu a { color: #4D4D4D; text-decoration: none; }
.menu a:hover { color: orange; }
|
當然,如果你希望明確指出樣式只應用於 <li>
內的 <a>
,你也可以使用 .menu li a
1 2 3 4 5 6 7 8
| .menu li a { color: #4D4D4D; text-decoration: none; }
.menu li a:hover { color: orange; }
|
但由於 <ul>
只能包含 <li>
元素,所以這種針對性在這個例子中並非必要。
💠 總結
後代選擇器是一個強大的工具,可用來選取元素中的子孫元素。儘管它功能強大,但在實際使用中應該保持選擇器的簡潔性,避免過度複雜的選擇器組合,這樣可以提高代碼的可讀性和維護性。
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。