後代選擇器（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> 元素，所以這種針對性在這個例子中並非必要。

💠總結

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

本文將同步更新至 Lala Code