CSS 選擇器
CSS 選擇器是一種用於選擇 HTML 文檔中要樣式化的元素的模式。
它們允許您指定樣式應用於哪些 HTML 元素，從而控制網頁的外觀和布局。
以下是一些常見的 CSS 選擇器以及它們的說明：
📝 TL;DR
- 選擇器決定「對誰套樣式」，先理解類型（元素、類別、ID、屬性、偽類/偽元素）與結構選擇器（子、相鄰兄弟、通用兄弟、後代）。
- 優先度：ID > class/屬性/偽類 > 元素/偽元素；行內樣式比 CSS 表還高，
!important再更高但慎用。 - 父選擇器
&可精簡重複前綴（現代瀏覽器支援），寫法與巢狀樣式搭配可讀性最好。
前置知識
- HTML 基本標籤語意與屬性（class、id、type）。
- CSS 基礎語法與盒模型概念。
- 瀏覽器優先度與覆寫規則的基本順序。
介紹
1. 元素選擇器(標籤 tag)：
例如：p、h1、div 通過元素的名稱選擇 HTML 元素。
<p>Hello, world!</p>p {
color: blue;
}2. 類別選擇器：
例如：.my-class 使用 class 屬性的值（例如 my-class）選擇具有特定類別的元素。
<div class="highlight">Hello, world!</div>.highlight {
background-color: yellow;
}3. ID 選擇器：
例如：#my-id 使用 id 屬性的值（例如 my-id）選擇具有特定 ID 的元素。ID 在整個 HTML 文檔中應該是唯一的。
<div id="highlight">Hello, world!</div>#highlight {
background-color: yellow;
}4. 屬性選擇器：
例如：[type="text"] 使用元素的屬性和相應值來選擇元素。
<input type="text" /> <button type="button"></button>input[type="text"] {
border: 1px solid gray;
}
[type="button"] {
border: 1px solid white;
}5. 群組選擇器：
例如：h1, h2, h3 同時選擇多個不同類型的元素，並對它們應用相同的樣式。 後代選擇器：
例如：ul li 選擇某元素的後代元素，以便只選擇特定嵌套關係的元素。
h1, h2, h3 {
font-family: Arial, sans-serif;
}CSS 選擇器的好處：
- 分離內容和樣式：CSS 允許您將網頁的外觀和布局從 HTML 內容中分離出來，使代碼更易於維護和管理。
- 選擇性樣式化：您可以精確地選擇要樣式化的元素，以根據需要應用特定的樣式。這使您能夠創建具有不同外觀的不同部分，而無需更改 HTML 結構。
- 重用性：通過使用類別和 ID 選擇器，您可以創建可重用的樣式，以便在整個網站中使用相同的外觀元件。
優化性能：通過僅樣式化所需的元素，您可以減少網頁的加載時間和內存占用。
範例
<!DOCTYPE html>
<html>
<head>
<style>
/* 元素選擇器 */
p {
font-size: 16px;
color: blue;
}
/* 類別選擇器 */
.highlight {
background-color: yellow;
}
/* ID選擇器 */
#header {
text-align: center;
background-color: #333;
color: #fff;
padding: 10px;
}
/* 後代選擇器 */
ul li {
list-style-type: square;
}
</style>
</head>
<body>
<!-- 使用不同的選擇器樣式化不同元素 -->
<div id="header">Welcome to My Website</div>
<p>這是一段帶有<span class="highlight">突出顯示</span>的文字</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>進階的選擇器
子元素選擇器 (>)：
ul > li（子元素選擇器）：
ul > li 選擇了 <ul> 元素的直接子元素中的所有 <li> 元素。 它只會選擇 <ul> 元素的子級 <li>，不會選擇深度嵌套在其他元素內部的 <li>。 這意味著只有以下結構的 <li> 元素會被選中：<ul> 的直接子元素是 <li>。
<ul>
<li>Item 1</li>
<!-- 選中 -->
<li>Item 2</li>
<!-- 選中 -->
<div>
<li>Item 3</li>
<!-- 不選中，因為它不是 <ul> 的直接子元素 -->
</div>
</ul>ul > li {
...;
}ul li（後代選擇器）：
ul li 選擇了 <ul> 元素下的所有 <li> 元素，不論它們是否是直接子元素。 它選擇了所有深度嵌套在 <ul> 元素內部的 <li> 元素，包括直接子元素和所有後代元素。
這個選擇器選擇指定元素的直接子元素。例如，如果您想選擇某個元素的直接子元素，可以使用>選擇器。
<ul>
<li>Item 1</li> <!-- 選中 -->
<li>Item 2</li> <!-- 選中 -->
<div>
<li>Item 3</li> <!-- 選中，因為它是 <ul> 的後代元素 -->
</div>
</ul>ul li{
...
}相鄰兄弟選擇器 (+)：
這個選擇器選擇某個元素後面的相鄰兄弟元素。例如，如果您想選擇某個元素後面的下一個相鄰元素，可以使用+選擇器。
<h2>Title 1</h2>
<p>...</p> <!-- 選中 -->
<p>...</p> <!-- 不選中 -->h2 + p {
color: green;
}這個示例會選擇<h2>元素後面的第一個相鄰的<p>元素，並將其文字顏色設置為綠色。
通用兄弟選擇器 (~)：
這個選擇器選擇某個元素後面的所有相鄰兄弟元素。不像+只選擇下一個兄弟元素，~選擇所有符合條件的相鄰兄弟元素。
<h2>Title 1</h2>
<p>...</p> <!-- 選中 -->
<p>...</p> <!-- 選中 -->h2 ~ p {
font-style: italic;
}這個示例會選擇所有與<h2>元素後面相鄰的<p>元素，並將它們的字體樣式設置為斜體。
選擇父元素 (:has)：
<div class="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<span>Span 1</span>
</div>.container:has(p) {
border: 2px solid blue;
}父選擇器精簡寫法 (&)
現代瀏覽器支援在巢狀語法中使用 & 代表父選擇器，能避免重複前綴：
.card {
color: #222;
& h1 {
font-size: 1.5rem;
}
& p:hover {
color: #0a7;
}
&.active {
border: 2px solid #0a7;
}
@media (max-width: 768px) {
& {
padding: 12px;
}
}
}要點：
&會被替換成外層選擇器，例如上例展開為.card h1、.card p:hover、.card.active。- 巢狀媒體查詢時
&仍指向父選擇器，可集中維護同一區塊的樣式。 - 與 Sass 巢狀概念相似，但此處需保留
&，不可省略。
優先度視覺化
簡易計分（高到低）：ID (100) > class/屬性/偽類 (10) > 元素/偽元素 (1)。
小遊戲
實戰練習
練習 1：指定後代（簡單）⭐
選中
.todo下的<li>，讓文字變綠。
💡 參考答案
.todo li {
color: green;
}練習 2：相鄰兄弟（簡單）⭐
只讓
<h3>後第一個<p>加粗。
💡 參考答案
h3 + p {
font-weight: 700;
}練習 3：父選擇器與狀態（中等）⭐⭐
使用巢狀與
&，為.card：正常時灰邊，:hover時綠邊，.active時藍底，768px 以下內距 12px。
💡 參考答案與提示
提示： & 展開即父選擇器本身。
參考答案：
.card {
border: 1px solid #ccc;
&:hover {
border-color: #0a7;
}
&.active {
background: #e6f4ff;
}
@media (max-width: 768px) {
& {
padding: 12px;
}
}
}延伸閱讀
FAQ
:has能在所有瀏覽器用嗎？- 現代 Chromium/Safari/Firefox 已支援，IE 不支援；如需兼容舊版需降階解法。
&和 Sass 巢狀有什麼不同？- 概念相同，但在原生 CSS 必須寫出
&；Sass 會自動套用父選擇器。
- 概念相同，但在原生 CSS 必須寫出
- 如何避免特指度過高？
- 避免在同一規則疊加過多選擇器；用 class 為主，不濫用 ID 或
!important。
- 避免在同一規則疊加過多選擇器；用 class 為主，不濫用 ID 或
Contributors
lucashsu95