CSS 選取器介紹：基本、複合與偽元素三大類

選取器 (Selector) 是 CSS 中用來選擇 HTML 元素 並應用樣式的模式。它們可以根據元素的名稱、ID、類別、屬性或結構的特性來選擇目標元素。大致可分為三類，每類選取器各有其應用場景與特性。

基本選取器

用元素名稱、ID、類別、屬性或狀態直接選取目標，語法最單純，也是日常寫得最多的一類。彼此的 權重 差距很大，實務上以類別選取器為主力。

選取器	說明
通用	* 選到所有元素，權重為零，常用於樣式重置。
元素	用標籤名稱選取，適合設定全站的基底樣式。
ID	# 開頭，一頁只該出現一次，權重最高也最難覆蓋。
類別	. 開頭，可重複使用，實務上的主力。
屬性	依屬性或屬性值選取，例如：表單的各種 type。
偽類	選取處於某種狀態或位置的元素，例如：:hover。

複合選取器

把多個條件或元素之間的結構關係組合起來，選得比基本選取器更精準。代價是和 HTML 結構綁在一起，結構一調動就容易失效。

選取器	說明
後代	以空格分隔，選到所有層級的後代。
直屬後代	> 只選第一層子元素。
同層	~ 選到其後所有的同層元素。
鄰接同層	+ 只選緊接在後的那一個同層元素。

偽元素

選取元素的某個部分，或憑空產生一段內容，這些都是標籤與屬性選不到的。它與 偽類 的差別在冒號數量：偽類用單冒號選狀態，偽元素用雙冒號選部分。

偽元素	說明
無中生有	::before、::after 在元素內容的前後插入內容。
背景遮罩	::backdrop 選取全螢幕元素或對話框後方的那層遮罩。
佔位符	::placeholder 調整輸入欄位提示文字的樣式。

速查表

寫法	選到的對象	說明
*	所有元素	通用選取器
p	所有 <p>	元素選取器
#id	指定 ID 的元素	ID 選取器
.class	帶有該類別的元素	類別選取器
[type="text"]	屬性符合的元素	屬性選取器
a:hover	處於該狀態的元素	偽類
ul li	所有後代	後代選取器
ul > li	第一層子元素	直屬後代
h2 ~ p	其後所有兄弟	同層
h2 + p	緊接的下一個兄弟	鄰接同層
p::before	元素的某個部分	偽元素

選得到，也要好維護

選取器選得越精準，權重 通常也越高，日後越難覆蓋：

/* ❌ 綁死結構，改個標籤就失效，權重也高 */
#main .content ul li a span { color: red; }

/* ✅ 一個類別就夠，語意清楚也好覆蓋 */
.link-label { color: red; }

小提醒

實務上多以 類別選取器 為主力，ID 留給錨點與 JavaScript 使用，元素選取器則用於樣式初始化。

常見問題

選取器該選多精準？

夠用就好。層層堆疊的長選取器雖然精準，卻讓 權重 變高、日後難以覆蓋，也和 HTML 結構綁得太死。實務上多以類別選取器為主。

偽類和偽元素有什麼不同？

偽類 選的是處於某種狀態的既有元素，例如：滑鼠移入或第幾個子元素，用單冒號；偽元素 選的是元素的某個部分或憑空產生的內容，用雙冒號。

選取器會影響效能嗎？

現代瀏覽器的樣式比對非常快，一般網站幾乎感覺不到差異。真正該在意的是可維護性；只有在超大型頁面中大量使用 通用選取器 搭配複雜結構時，才值得回頭檢視。

延伸閱讀

類別選取器偽類選取器優先權 specificity構成與規則