通用選擇器（Universal Selector）也稱為「通配選擇器」或「全體選擇器」，這些名稱指的都是同一個概念。
通用選擇器可以使用 * 符號來選取所有元素，這在你需要對所有元素應用相同樣式時特別有用。

💠通用選擇器-基本用法

<h1>你今天吃素了嗎</h1>

<p>初一吃素，初二吃素，初三吃素，初四吃素，初五吃素，初六吃素，初七吃素，初八吃素，初九吃素，初十吃素</p>

<div>太難了吧~~😱</div>

* {
    color: darkolivegreen; 
}

• 選取所有元素：使用 * 符號可以選中所有的 HTML 元素。

從上面的範例可以發現，<h1>、<p>、<div> 都一起變色了~

使用通用選擇器時應謹慎，因為它會影響所有元素，可能會導致性能問題和樣式衝突，建議在特定的情境下使用，或與其他選擇器結合使用，以更精確地控制樣式

💠實務應用：CSS 初始配置

通用選擇器通常用於 CSS 初始配置，例如，設定元素的總寬高範圍。
元素的 box-sizing 預設為 content-box，這意味著元素的總寬高是元素本身加上內間距和邊框。以下範例：

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: burlywood;
  padding: 20px;
}

在這個例子中，藍色區域代表元素的大小（200px x 200px），內間距 padding 是 20px，邊框 border 是 6px

因此，總寬高變成了 252px x 252px（元素寬高 + padding + border）

如果我們希望元素寬高包含內間距和邊框，可以將 .box 設置 box-sizing: border-box

.box {
  width: 200px;
  height: 200px;
  background-color: burlywood;
  padding: 20px;
  box-sizing: border-box;
}

但這設定其實可應用於所有元素，我們可以使用通用選擇器：

* {
  box-sizing: border-box;
}

如此一來，所有元素都不必再去計算寬高囉！

💠總結

• 通用選擇器會選取所有的 HTML 元素，如果只需要選擇特定元素，應搭配其他選擇器
• 通用選擇器適合用於 CSS 的初始配置，例如設定元素的寬高範圍（如 box-sizing）

本文將同步更新至 Lala Code