CSS 選擇器 參考
CSS 選擇器
在 CSS 中，選擇器是用於選擇要設定樣式的元素（或元素集）的模式。
使用我們的 CSS 選擇器測試器 來演示不同的選擇器。
| 選擇器 | 示例 | 示例描述 |
|---|---|---|
| .class | .intro | 選擇所有 class="intro" 的元素 |
| .class1.class2 | .name1.name2 | 選擇所有類屬性中同時包含 name1 和 name2 的元素 |
| .class1 .class2 | .name1 .name2 | 選擇所有 name2 是 name1 元素後代的元素 |
| #id | #firstname | 選擇 id="firstname" 的元素 |
| * | * | 選擇所有元素 |
| 元素 | p | 選擇所有 <p> 元素 |
| element.class | p.intro | 選擇所有類名為 "intro" 的 <p> 元素 |
| element,element | div, p | 選擇所有 <div> 元素和所有 <p> 元素 |
| element element | div p | 選擇 <div> 元素內的所有 <p> 元素 |
| element>element | div > p | 選擇所有父元素是 <div> 元素的 <p> 元素 |
| element+element | div + p | 選擇緊跟在 <div> 元素後面的第一個 <p> 元素 |
| element1~element2 | p ~ ul | 選擇所有前面有 <p> 元素的 <ul> 元素 |
| [attribute] | [target] | 選擇所有帶有 target 屬性的元素 |
| [attribute=value] | [target="_blank"] | 選擇所有 target="_blank" 的元素 |
| [attribute~=value] | [title~="flower"] | 選擇所有 title 屬性中包含單詞 "flower" 的元素 |
| [attribute|=value] | [lang|="en"] | 選擇 lang 屬性值等於 "en" 或以 "en-" 開頭的元素 |
| [attribute^=value] | a[href^="https"] | 選擇所有 href 屬性值以 "https" 開頭的 <a> 元素 |
| [attribute$=value] | a[href$=".pdf"] | 選擇所有 href 屬性值以 ".pdf" 結尾的 <a> 元素 |
| [attribute*=value] | a[href*="w3schools"] | 選擇所有 href 屬性值包含子字串 "w3schools" 的 <a> 元素 |
| :active | a:active | 選擇活動連結 |
| :checked | input:checked | 選擇所有已選中的 <input> 元素 |
| :default | input:default | 選擇預設的 <input> 元素 |
| :disabled | input:disabled | 選擇所有停用的 <input> 元素 |
| :empty | p:empty | 選擇沒有子元素（包括文字節點）的所有 <p> 元素 |
| :enabled | input:enabled | 選擇所有啟用的 <input> 元素 |
| :first-child | p:first-child | 選擇是其父元素第一個子元素的每個 <p> 元素 |
| :first-of-type | p:first-of-type | 選擇作為其父元素的第一個 <p> 元素的所有 <p> 元素 |
| :focus | input:focus | 選擇獲得焦點的 input 元素 |
| :fullscreen | :fullscreen | 選擇處於全屏模式的元素 |
| :has() | h2:has(+p) | 選擇後面緊跟著 p 元素的 h2 元素，並將樣式應用於 h2 |
| :hover | a:hover | 滑鼠懸停時選擇連結 |
| :in-range | input:in-range | 選擇值在指定範圍內的 input 元素 |
| :indeterminate | input:indeterminate | 選擇處於不確定狀態的 input 元素 |
| :invalid | input:invalid | 選擇所有值為無效的 input 元素 |
| :is() | :is(ul, ol) | 選擇所有 <ul> 和 <ol> 元素 |
| :lang() | p:lang(it) | 選擇 lang 屬性值等於 "it"（義大利語）的每個 <p> 元素 |
| :last-child | p:last-child | 選擇是其父元素最後一個子元素的每個 <p> 元素 |
| :last-of-type | p:last-of-type | 選擇作為其父元素的最後一個 <p> 元素的所有 <p> 元素 |
| :link | a:link | 選擇所有未訪問的連結 |
| :not() | :not(p) | 選擇所有不是 <p> 元素的元素 |
| :nth-child() | p:nth-child(2) | 選擇作為其父元素的第二個子元素的所有 <p> 元素 |
| :nth-last-child() | p:nth-last-child(2) | 選擇作為其父元素的第二個子元素的所有 <p> 元素，從最後一個子元素開始計數 |
| :nth-last-of-type() | p:nth-last-of-type(2) | 選擇作為其父元素的第二個 <p> 元素的所有 <p> 元素，從最後一個子元素開始計數 |
| :nth-of-type() | p:nth-of-type(2) | 選擇作為其父元素的第二個 <p> 元素的所有 <p> 元素 |
| :only-of-type | p:only-of-type | 選擇作為其父元素的唯一 <p> 元素的所有 <p> 元素 |
| :only-child | p:only-child | 選擇作為其父元素的唯一子元素的所有 <p> 元素 |
| :optional | input:optional | 選擇沒有 "required" 屬性的 input 元素 |
| :out-of-range | input:out-of-range | 選擇值不在指定範圍內的 input 元素 |
| :read-only | input:read-only | 選擇指定了 "readonly" 屬性的 input 元素 |
| :read-write | input:read-write | 選擇未指定 "readonly" 屬性的 input 元素 |
| :required | input:required | 選擇指定了 "required" 屬性的 input 元素 |
| :root | :root | 選擇文件的根元素 |
| :target | #news:target | 選擇當前活動的 #news 元素（點選包含該錨點名稱的 URL） |
| :valid | input:valid | 選擇所有值為有效的 input 元素 |
| :visited | a:visited | 選擇所有已訪問的連結 |
