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

💠 通用選擇器-基本用法

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

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

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

1
2
3

* {
  color: darkolivegreen;
}

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

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

💠 實務應用：CSS 初始配置

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

1	<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;
}

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

1
2
3

* {
  box-sizing: border-box;
}

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

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

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

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

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