在網頁設計與開發的領域中，CSS (Cascading Style Sheets) 扮演著至關重要的角色，它賦予了網站多樣的視覺樣貌與風格。而要精準地控制網頁中每一個element的樣式，就必須掌握 CSS 的核心功能——選擇器 (Selectors)。CSS選取器就如同導航員，它能根據我們設定的語法規則，在龐大的 HTML 文件中快速且準確地找到目標元素進行定位，並為其套上指定的樣式。
無論您是網頁設計的初學者，或是希望精進 CSS 技能的開發者，深入理解並靈活運用各種選擇器，都是一項不可或缺的關鍵技能。本篇教學會帶您全面性地認識 css selector，從基礎觀念到進階應用，透過詳細的解說與例子，讓您徹底掌握這項強大的工具。
CSS 基本選擇器速查表
為了讓您能快速查閱，以下整理了最基礎且常用的 CSS 選擇器：
| 選擇器 | 名稱 | 說明 | CSS 版本 |
|---|---|---|---|
| * | 通用選擇器 | 選取所有元素。 | 2 |
| E | 類型選擇器 | 選取所有指定類型的 HTML 元素，例如 <h1>、<p>、<div>。 | 1 |
| #idname | ID 選擇器 | 選取 id 屬性值等於 idname 的元素。 | 1 |
| .classname | Class 選擇器 | 選取 class 屬性值包含 classname 的元素。 | 1 |
| [attr] | 屬性選擇器 | 選取擁有 attr 屬性的元素。 | 2 |
| [attr=”value”] | 屬性選擇器 | 選取擁有 attr 屬性且值等於 value 的元素。 | 2 |
| [attr~=”value”] | 屬性選擇器 | 選取擁有 attr 屬性且其值為以空格分隔的一個或多個單詞，其中一個單詞等於 value 的元素。 | 2 |
| [attr^=”value”] | 屬性選擇器 | 選取擁有 attr 屬性且其值以 value 開頭的元素。 | 3 |
| [attr$=”value”] | 屬性選擇器 | 選取擁有 attr 屬性且其值以 value 結尾的元素。 | 3 |
| [attr*=”value”] | 屬性選擇器 | 選取擁有 attr 屬性且其值包含 value 的元素。 | 3 |
各式選擇器深度解析
基本選擇器 (Simple Selectors)
通用選擇器 (*)
選取頁面上所有的 HTML 元素。通常用於 CSS 重置 (Reset)，將所有元素的 margin 和 padding 歸零。
* {
margin: 0;
padding: 0;
}
類型選擇器 (Type Selectors)
直接使用 HTML 元素名稱作為選擇器，例如 h1、p、div 等。
/* 此寫法會選取所有 h1元素 */
h1 {
color: blue;
}
Class 選擇器 (.classname)
選取具有特定 class 屬性的元素。class 可以在一個頁面中重複使用，是相當靈活的選擇方式。
.highlight {
background-color: yellow;
}
ID 選擇器 (#idname)
選取具有特定 id 屬性的元素。一個 div id 在一個 HTML 文件中必須是唯一的，因此權重較高，通常用於指定單一、獨特的元素，其id名稱不可重複。
#main-content {
width: 960px;
}
屬性選擇器 ([attribute])
根據元素的屬性來選取。除了上述表格的基本用法，還有更多進階的匹配方式，這種寫法十分強大。
- div[title]: 選取帶有 title 屬性的 div 元素，也就是div title。
- [target=”_blank”]: 選取 target 屬性的值完全等於 _blank 的元素。
- a[href*=”example”]: 選取 a href 屬性值中包含 “example” 字串的元素。
- [href^=”https”]: 選取 href 屬性值以 “https” 開頭的元素。
- [href$=”.pdf”]: 選取 href 屬性值以 “.pdf” 結尾的元素，title屬性也適用此規則。
組合選擇器 (Combinators)
此類選擇器的工作原理是透過組合兩個以上的簡單選擇器來建立更精確的目標。
後代選擇器 (Descendant Selector) (空格)
選取某個元素的所有後代元素。
/* 選取 div 元素內所有的 a 元素 */
div a {
color: red;
}
子選擇器 (Child Selector) (>)
只選取某個元素的直接子元素。
/* 只選取 ul 元素的直接子元素 li */
ul > li {
list-style-type: none;
}
相鄰兄弟選擇器 (Adjacent Sibling Selector) (+)
選取緊接在某個元素之後的同層級元素。
/* 選取緊接在 h2 元素之後的 p 元素 */
h2 + p {
margin-top: 0;
}
通用兄弟選擇器 (General Sibling Selector) (~)
選取某個元素之後的所有同層級兄弟元素。
/* 選取 h2 元素之後的所有同層級的 p 元素 */
h2 ~ p {
font-style: italic;
}
虛擬類別選擇器 (Pseudo-classes)
虛擬類別（也稱偽類）用於定義元素的特殊狀態。
:hover
當滑鼠游標停留在元素上時。
button:hover {
background-color: #3e8e41;
}
:focus
當元素獲得焦點時 (例如，透過點擊或 Tab 鍵)。
input:focus {
border-color: #66afe9;
}
:first-child
選取其父元素的第一個子元素。
li:first-child {
font-weight: bold;
}
:last-child
選取其父元素的最後一個子元素。
:nth-child(n)
選取其父元素的第 n 個子元素，例如li nth child。n 可以是數字、關鍵字 (odd, even) 或公式 (2n+1)。
/* 選取奇數行的 li 元素 */
li:nth-child(odd) {
background-color: #f2f2f2;
}
:first-of-type
選取其父元素下，第一個該類型的子元素。
/* 選取每個 div 中的第一個 p 元素 */
p:first-of-type {
text-decoration: underline;
}
:nth-last-of-type(n)
從後往前計算，選取其父元素下，第 n 個該類型的子元素。
/* 選取每個 section 中倒數第二個 h3 元素 */
h3:nth-last-of-type(2) {
color: purple;
}
虛擬元素選擇器 (Pseudo-elements)
虛擬元素（也稱偽元素）用於選取元素的特定部分。
::before
在元素的內容之前插入內容。
p::before {
content: "註：";
}
::after
在元素的內容之後插入內容。
p.warning::after {
content: " - 請注意此 text！";
}
::first-letter
選取元素的第一個字母。
p::first-letter {
font-size: 2em;
}
::first-line
選取元素的第一行。
常見問題 (FAQ)
Q1: ID 選擇器和 Class 選擇器有什麼主要區別？
A1: 主要區別在於唯一性。一個 HTML 文件中的 id 屬性值必須是唯一的，因此 ID 選擇器 (#) 用於選取單一、特定的元素。而 class 屬性值可以在多個元素上重複使用，因此 Class 選擇器 (.) 適用於將相同樣式應用於一組元素。
Q2: 什麼是 CSS 選擇器的權重 (Specificity)？
A2: 當多個 CSS 規則應用於同一個元素時，瀏覽器會根據選擇器的權重來決定最終顯示的樣式。權重高的樣式會覆蓋權重低的樣式。一般來說，權重順序為：行內樣式 (inline style) > ID 選擇器 > Class 選擇器、屬性選擇器、虛擬類別 > 類型選擇器、虛擬元素 > 通用選擇器。在處理舊版瀏覽器的兼容性時，理解權重尤為重要。
Q3: :nth-child(n) 和 :nth-of-type(n) 有什麼不同？
A3: :nth-child(n) 會選取其父元素下的所有子元素中的第 n 個，不論其類型。而 :nth-of-type(n) (包含 first-of-type) 則會選取其父元素下特定類型的子元素中的第 n 個。當父元素下有多種不同類型的子元素時，這個差異尤為重要。
總結
精通 CSS 選擇器是提升前端開發效率與品質的基石。從簡單的類型、Class 與 ID 選擇器，到功能強大的組合、屬性及虛擬選擇器，每一種都有其獨特的應用場景。透過靈活組合這些選擇器，開發者可以大幅減少對 HTML 結構的依賴，撰寫出更簡潔、更具維護性的 CSS 程式碼。希望透過本篇的整理與介紹，能幫助您建立扎實的 CSS 選擇器知識體系，並在未來的專案中游刃有餘地駕馭網頁的樣式與佈局。
