基本選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| .class | .intro | 選擇"class=intro"的所有元素 |
| #id | #firstname | 選擇"id=firstname"的所有元素 |
| * | * | 選擇所有元素 |
| element | p | 選擇所有p元素 |
結(jié)構(gòu)選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| element,element（并集選擇器） | div,p | 選擇所有div元素和所有p元素 |
| element element（后代選擇器） | div p | 選擇div元素內(nèi)部的所有p元素 |
| element>element（子元素選擇器） | div>p | 選擇父元素為div元素的所有p元素 |
| element+element（緊鄰兄弟元素） | div+p | 選擇緊接在div元素后的緊挨的兄弟p元素 |
| element1~element2（后面兄弟元素） | h1~h2 | 選擇h1后面的兄弟元素為h2的元素 |
屬性選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| [attribute] | [target] | 選擇帶有target屬性的所有元素 |
| [attribute=value] | [target=flower] | 選擇target屬性包含單詞"flower"的元素 |
| [attribute~=value] | [target~=flower] | 選擇target屬性包含單詞"flower"的元素 |
| [attribute*value] | a[src*="abc"] | 選擇src屬性中包含"abc"字符串的每個(gè)元素 |
| [attribute^=value] | a[src^="http"] | 選擇src屬性值以"http"開(kāi)頭的每個(gè)元素 |
| [attribute$=value] | a[src$=".pdf"] | 選擇src屬性值以“.pdf結(jié)尾的每個(gè)元素 |
偽類選擇器
| 狀態(tài) | 示例 | 描述 |
|---|---|---|
| :link | a:link | 選擇所有未被訪問(wèn)的鏈接 |
| :visited | a:visited | 選擇所有已被訪問(wèn)的鏈接 |
| :hover | a:hover | 鼠標(biāo)移動(dòng)到元素上 |
| :active | a:active | 點(diǎn)擊發(fā)生時(shí) |
| :focus | input::focus | 選擇獲得焦點(diǎn)的input元素 |
| :root | :root | 選擇文檔的根元素即html |
| :empty | p:empty | 選擇沒(méi)有子元素的每個(gè)p元素 |
結(jié)構(gòu)偽類
| 狀態(tài) | 示例 | 說(shuō)明 |
|---|---|---|
| :first-child | p:first_child | 選擇屬于父元素的第一個(gè)子元素的每個(gè)p元素 |
| :last-child | p:last-child | 選擇屬于父元素的最后一個(gè)子元素的每個(gè)p元素 |
| :first-of-type | p:first-of-type | 選擇屬于父元素的第一個(gè)p元素 |
| :last-of-type | p:last-of-type | 選擇屬于父元素的最后一個(gè)p元素 |
| :only-child | p:only-child | 選擇屬于父元素的唯一子元素的p元素 |
| :only-of-type | p:only-of-type | 選擇屬于父元素的為一的p元素 |
