| 選取器 | 舉例 | 說明 | 版本 | 參考 |
|---|---|---|---|---|
| * | * | 萬用選取器, 代表了所有的選取器。 | 2 | 英文 ／ 簡中 |
| tag標籤名稱 | div | 針對HTML標籤元素名稱當選取器。 | 1 | 英文 ／ 簡中 |
| #ID名稱 | #content | 針對HTML標籤元素設定的ID名稱當選取器。 | 1 | 英文 ／ 簡中 |
| .class類別名稱 | .container | 針對HTML標籤元素設定的class類別名稱當選取器。 | 1 | 英文 ／ 簡中 |
| 選取器 , 選取器 | div , p | 同時設定多個選取器。 | 1 | 英文 ／ 簡中 |
| 選取器 | 舉例 | 說明 | 版本 | 參考 |
|---|---|---|---|---|
| 選取器 選取器 | div p | 定義指定外層選取器 div 內的 "子" "孫" 元素 p 當選取器。 | 1 | 英文 ／ 簡中 |
| 選取器 > 選取器 | div > p | 定義指定外層選取器 div 內的 "子" 元素 p 當選取器。 | 2 | 英文 ／ 簡中 |
| 選取器 + 選取器 | div + p | 定義緊接在 div 後方同一層的元素 p 當選取器。 | 2 | 英文 ／ 簡中 |
| 選取器 ~ 選取器 | div ~ p | 定義在 div 後方同一層的所有元素 p 當選取器。 | 3 | 英文 ／ 簡中 |
| 選取器 | 舉例 | 說明 | 版本 | 參考 |
|---|---|---|---|---|
| ::after 或 :after | div::after | 在指定選取器 div 內的後方位置。 | 2 | 英文 ／ 簡中 |
| ::before 或 :before | div::before | 在指定選取器 div 內的前方位置。 | 2 | 英文 ／ 簡中 |
| ::first-letter 或 :first-letter | p::first-letter | 在指定選取器 p 內的第一個字元。 | 1 | 英文 ／ 簡中 |
| ::first-line 或 :first-line | p::first-line | 在指定選取器 p 內的第一行。 | 1 | 英文 ／ 簡中 |
| ::selection | ::selection | 滑鼠拖曳選取的部份。 | 3 | 英文 ／ 簡中 |
| 選取器 | 舉例 | 說明 | 版本 | 參考 |
|---|---|---|---|---|
| :link | a:link | 連結標籤元素未點選存取時。 | 1 | 英文 ／ 簡中 |
| :visited | a:visited | 連結標籤元素已點選存取過。 | 1 | 英文 ／ 簡中 |
| :hover | a:hover | 連結標籤元素當滑鼠滑入上方時。 | 1 | 英文 ／ 簡中 |
| :active | a:active | 連結標籤元素當滑鼠在上方按著未放時。 | 1 | 英文 ／ 簡中 |
| :focus | input:focus | 使用滑鼠或鍵盤讓焦點停在元素上時。 | 2 | 英文 ／ 簡中 |
| :target | a:target | 連結錨點時, 當按下連結時, 設定錨點位置為選取器。 | 3 | 英文 ／ 簡中 |
| :lang | p:lang(it) | 設定帶有指定 lang 屬性的元素為選取器。 | 2 | 英文 ／ 簡中 |
| 選取器 | 舉例 | 說明 | 版本 | 參考 |
|---|---|---|---|---|
| :first-child | p:first-child | 符合左側指定的元素, 並且是所屬層次中的第一個子元素。 | 2 | 英文 ／ 簡中 |
| :first-of-type | p:first-of-type | 在所屬層次中符合左側指定元素的第一個元素。 | 3 | 英文 ／ 簡中 |
| :last-child | p:last-child | 符合左側指定的元素, 並且是所屬層次中的最後一個子元素。 | 3 | 英文 ／ 簡中 |
| :last-of-type | p:last-of-type | 在所屬層次中符合左側指定元素的最後一個元素。 | 3 | 英文 ／ 簡中 |
| :only-child | p:only-child | 符合左側指定的元素, 並且是所屬層次中的唯一子元素。 | 3 | 英文 ／ 簡中 |
| :only-of-type | p:only-of-type | 在所屬層次中符合指定元素p, 並且只有一個指定元素p。 | 3 | 英文 ／ 簡中 |
| :nth-child(n) | p:nth-child(n) | 符合左側指定的元素, 並且是所屬層次中符合第 n 個子元素。 | 3 | 英文 ／ 簡中 |
| :nth-of-type(n) | p:nth-of-type(n) | 在所屬層次中符合第 n 個指定元素 p。 | 3 | 英文 ／ 簡中 |
| :nth-last-child(n) | p:nth-last-child(n) | 符合左側指定的元素, 並且是所屬層次中符合倒數第 n 個子元素。 | 3 | 英文 ／ 簡中 |
| :nth-last-of-type(n) | p:nth-last-of-type(n) | 在所屬層次中符合倒數第 n 個指定元素 p。 | 3 | 英文 ／ 簡中 |
| :not(選取器) | :not(p) | 排除指定標籤之外的符合元素為選取器。 | 3 | 英文 ／ 簡中 |
| 選取器 | 舉例 | 說明 | 版本 | 參考 |
|---|---|---|---|---|
| [attribute屬性] | [target] | 選擇所有帶有 target 目標屬性元素。 | 2 | 英文 ／ 簡中 |
| [attribute屬性=value] | [target=_blank] | 選擇所有使用 target = "_blank" 的元素。 | 2 | 英文 ／ 簡中 |
| [attribute屬性~=value] | [title~=flower] | 選擇 title 標題屬性 包含單詞 "flower" 的所有元素。 | 2 | 英文 ／ 簡中 |
| [attribute屬性|=value] | [lang|=en] | 選擇一個 lang 屬性的起始值 = "en" 的所有元素。 | 2 | 英文 ／ 簡中 |
| [attribute屬性^=value] | a [href ^= "https"] | 選擇每一個 src 屬性的值以 "https" 開頭的元素。 | 3 | 英文 ／ 簡中 |
| [attribute屬性$=value] | a [href $= ".pdf"] | 選擇每一個 src 屬性的值以 ".pdf" 结尾的元素。 | 3 | 英文 ／ 簡中 |
| [attribute屬性*=value] | a [href *= "w3schools"] | 選擇每一個 src 屬性的值 包含 字串 "w3schools" 的元素。 | 3 | 英文 ／ 簡中 |
| 選取器 | 舉例 | 說明 | 版本 | 參考 |
|---|---|---|---|---|
| :enabled | input:enabled | 選擇每一個已啟用的輸入元素。 | 3 | 英文 ／ 簡中 |
| :disabled | input:disabled | 選擇每一個禁用的輸入元素。 | 3 | 英文 ／ 簡中 |
| :checked | input:checked | 選擇每個已勾選的核取方塊元素。 | 3 | 英文 ／ 簡中 |
| :out-of-range | :out-of-range | 當輸入值超出指定範圍之外的輸入元素。 | 3 | 英文 ／ 簡中 |
| :in-range | :in-range | 當輸入值在指定範圍之內的輸入元素。 | 3 | 英文 ／ 簡中 |
| :read-only | :read-only | 選擇已設定 "readonly" 只供讀取屬性的元素。 | 3 | 英文 ／ 簡中 |
| :optional | :optional | 選擇沒有設定 "required" 必填屬性的元素。 | 3 | 英文 ／ 簡中 |
| :required | :required | 選擇設定了 "required" 必填屬性的元素。 | 3 | 英文 ／ 簡中 |
| :valid | :valid | 選擇輸入值為有效的元素。 | 3 | 英文 ／ 簡中 |
| :invalid | :invalid | 選擇輸入值為無效的元素。 | 3 | 英文 ／ 簡中 |
WEB