Day9-後代選擇器-傳承的力量，輕鬆選中後代元素

後代選擇器（Descendant Combinator）用於選擇特定元素中的所有子孫元素，無論是直接的子元素還是更深層次的後代。當你需要對一個範圍內的所有元素應用相同的樣式時，它非常實用。

你可以把它想像成一個大家族的聚會。如果你要找出爺爺的所有男性子孫來組成一支男子棒球隊，從大伯、爸爸、小叔、哥哥、弟弟到弟弟的兒子、弟弟兒子的兒子、弟弟兒子兒子的兒子…(太多了，夠了🤪)，無論他們是哪一代，全部都會被揪出來，沒有人能躲過這個「後代選擇器」！

💠 後代選擇器-基本用法

語法

選擇器1 選擇器2 選擇器3 … 選擇器n {
	屬性名: 屬性值;
}

• 選擇器之間使用空格隔開，表示後面選擇器為前面選擇器的後代元素。
  
  

範例

範例一：選中所有 <ul> 內的 <li>

ul li {
	color: red;
}

範例二：選中所有 <ul> 內的 <li> 內的 <a>

ul li a {
    color: gold;
}

範例三：選中 dog 類別內的 <li>

.dog li {
	color: green;
}

範例四：選中 dog 類別內且類別為 cute 的 <li>

.dog li.cute {
	color: green;
}

💠 實務應用：選單樣式

在設計選單樣式時，如果所有的子選單樣式都一樣，我們可以直接使用 .menu a 來選中 menu 元素裡的所有 <a> 元素。這種方式既簡潔又易於維護。

<ul class="menu">
  <li>
    <a href="/">關於我們</a>
  </li>
  <li>
    <a href="/">產品介紹</a>
  </li>
  <li>
    <a href="/">聯絡我們</a>
  </li>
</ul>

.menu a {
  color: #4D4D4D;
  text-decoration: none;
}

.menu a:hover {
  color: orange;
}

當然，如果你希望明確指出樣式只應用於 <li> 內的 <a>，你也可以使用 .menu li a

.menu li a {
  color: #4D4D4D;
  text-decoration: none;
}

.menu li a:hover {
  color: orange;
}

但由於 <ul> 只能包含 <li> 元素，所以這種針對性在這個例子中並非必要。

---

💠 總結

後代選擇器是一個強大的工具，可用來選取元素中的子孫元素。儘管它功能強大，但在實際使用中應該保持選擇器的簡潔性，避免過度複雜的選擇器組合，這樣可以提高代碼的可讀性和維護性。

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。