CSS選擇器與優先性介紹

CSS 選擇器是用來選取 HTML 元素以套用樣式的工具，以下為常見選擇器的簡要說明：

元素選擇器
以 HTML 標籤名稱選取所有對應元素，例如 div、p、h1。
ID 選擇器
使用元素的 id 屬性選取單一元素，以 #id 名稱表示，例如 #header。
類別選擇器
使用元素的 class 屬性選取具有相同類別的元素，以 .class 名稱表示，例如 .button。
屬性選擇器
根據元素的屬性選取，例如 [type="text"] 選取所有 type 屬性為 text 的元素。
後代選擇器
選取某元素內的所有指定後代元素，使用空格分隔，例如 div p 選取 div 內的所有 p。
子選擇器
選取某元素的直接子元素，使用 >，例如 ul > li 選取 ul 的直接 li 子元素。
相鄰兄弟選擇器
選取緊跟在某元素後的同層元素，使用 +，例如 h2 + p 選取緊接在 h2 後的 p。
通用兄弟選擇器
選取某元素後的所有同層指定元素，使用 ~，例如 h2 ~ p 選取 h2 後所有同層的 p。
偽類選擇器
根據元素的特定狀態選取，例如 :hover（滑鼠懸停）、:first-child（第一個子元素）、:not(selector)（排除特定選擇器）。
偽元素選擇器
選取元素的特定部分，例如 ::before（元素前插入內容）、::after（元素後插入內容）。
通用選擇器
選取頁面中所有元素，使用 *，例如 * { margin: 0; }。
群組選擇器
同時選取多個選擇器，使用逗號分隔，例如 h1, h2, .title 套用相同樣式。

CSS 優先性

CSS 優先性（特異性）決定當多個 CSS 規則應用於同一元素時，哪個規則優先生效。優先性由選擇器的權重決定，權重越高，樣式越優先應用。

!important
最高優先級，寫在樣式屬性後，例如 color: blue !important;。除非有更高權重的 !important，否則總是優先。
內聯樣式（Inline Style）
直接寫在 HTML 元素的 style 屬性中，例如 <div style="color: red;">，權重高於外部或內部樣式表。
ID 選擇器
每個 ID 選擇器（如 #header）權重較高，例如 #header { color: blue; }。
類別、偽類、屬性選擇器
包括 .class、:hover、[type="text"] 等，權重低於 ID 選擇器。
元素、偽元素選擇器
如 div、p、::before，權重最低。
通用選擇器（*）
權重最低，幾乎不影響優先性。

優先性通過計算選擇器中的各類型數量決定，通常用三級數字表示（ID、類別/屬性、元素），例如：

比較方式：從左到右比較數字大小，ID 數量優先，ID 相同比類別，類別相同比元素。若權重相同，後寫的規則優先（層疊性）。

透過理解選擇器與優先性，可精準選取元素並控制樣式應用順序，避免樣式衝突。