基本選擇器
| 選擇器 |
說明 |
語法 |
| 通配符 |
作用範圍為所有標籤，用於頁面整體樣式 |
* { color: red } |
| 元素 |
作用於同種標籤，不能進行差異化樣式設定 |
p { color: red } |
| 類別 |
作用於我們自行設定的類別，是使用頻率最高的選擇器 |
.myClass { color: red } |
| ID |
選取當前 ID 相同的唯一元素 |
#myId { color: red } |
| 屬性選擇器 |
用法多元，依屬性進行篩選 |
[name="myElement"] { color: red } |
| 點我複習 |
|
|
複合選擇器
| 選擇器 |
說明 |
語法 |
| 交集 |
選取滿足所有選擇器的元素 |
選擇器1選擇器2...選擇器n { color: red } (不空格) |
| 併集 |
選取滿足任一選擇器的元素 |
選擇器1, 選擇器2, ...選擇器n { color: red } (逗號分隔) |
| 後代選擇器 |
選取符合條件的後代元素 |
元素1 後代 後代的後代 ... 後代n { color: red } (空格分隔) |
| 子選擇器 |
選取符合條件的(直接)子元素 |
元素1>子代>子代的子代>...子代n { color: red } (> 號分隔) |
| 點我複習 |
|
|
偽類選擇器
動態偽類
| 選擇器 |
說明 |
搭配元素 |
語法 |
:link |
未訪問過的連結 |
只能用於 a 連結相關元素 |
a:link{ } |
:visited |
已訪問過的連結 |
只能用於 a 連結相關元素 |
a:visited{ } |
:hover |
滑鼠懸在至元素上時 |
可用於所有元素 |
a:hover{ } |
:active |
點該擊元素時 |
可用於所有元素 |
a:active{ } |
:focus |
該元素被 focus 時 |
只能用於表單輸入類元素 |
input:focus{ } |
| 點我複習 |
|
|
|
結構偽類
| 選擇器 |
說明 |
補充 |
:root |
代表根元素，也就是 標籤。 |
幾乎不會用到 |
:first-child |
選擇第一個子元素 (不論是否為同類標籤) |
|
:last-child |
選擇最後一個子元素 (不論是否為同類標籤) |
與 first-child 相反，從後數到前 |
:first-of-type |
選擇第一個同類子元素 (同標籤的第一個子元素) |
|
:last-of-type |
選擇最後一個同類子元素 (同標籤的最後一個子元素) |
與 first-of-type 相反，從後數到前 |
:nth-child(n) |
選擇第 n 個子元素 |
n 中可以寫數字、基偶數關鍵字、an+b 公式 |
:nth-last-child(n) |
倒數第 n 個子元素 |
與 nth-child 相反，從後數到前 |
:nth-of-type(n) |
選擇第 n 個同類子元素 |
|
:nth-last-of-type(n) |
倒數第 n 個類子元素 |
與 nth-of-type 相反，從後數到前 |
:only-child |
沒有任何兄弟元素的子元素 |
獨生子的概念 |
| 點我複習 |
|
|
其他偽類
| 選擇器 |
說明 |
補充 |
:checked |
勾選狀態的單多選框 |
有些預設樣式不可修改，例如背景顏色 |
:disabled |
禁用狀態的元素 |
|
:enabled |
可用狀態的元素 |
較少用 |
:not(基本選擇器) |
選取除了括號內選擇器的元素 |
括號內只能放基本選擇器，不可再嵌套一個 not |
:target |
錨點的目標元素 |
|
:lang(語言) |
選取 lang 屬性值相符的元素 |
必須搭配 lang 屬性使用 |
| 點我複習 |
|
|
偽元素選擇器
| 選擇器 |
說明 |
補充 |
::first-letter |
元素內容的第一個字元 |
|
::first-line |
元素內容的第一行 |
|
::selection |
滑鼠選中的內容 |
|
::placeholder |
文字框提示文字 |
|
::before |
於元素內容前新增一個元素 |
content 為必要屬性 |
::after |
於元素內容後新增一個元素 |
content 為必要屬性 |
| 點我複習 |
|
|
上一篇：[快速入門前端 16] CSS 選擇器 (6) 偽元素選擇器
下一篇：[快速入門前端 18] CSS 選擇器的權重
系列文章列表：[快速入門前端] 系列文章索引列表
Doris
iThome鐵人賽
看影片追技術