前端面試題-CSS選擇器
阿新 • • 發佈：2018-12-25
一、CSS選擇器作用
CSS 選擇器用於定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支援的，比如 document.document.querySelectorAll。
二、選擇器型別
- 基本選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
三、基本選擇器
| 選擇器 | 含義 | 作用 | CSS |
|---|---|---|---|
| .class | 類選擇器 | 匹配 class 包含(不是等於)特定類的元素 | 1 |
| #id | id選擇器 | 匹配特定 id 的元素 | 1 |
| * | 通用元素選擇器 | 匹配頁面任何元素（這也就決定了我們很少使用） | 2 |
| element | 元素選擇器 | 選擇HTML元素 | 1 |
四、組合選擇器
| 選擇器 | 含義 | 作用 | CSS |
|---|---|---|---|
| E,F | 多元素選擇器 | 同時匹配元素E或元素F | 1 |
| E F | 後代選擇器 | 匹配E元素所有的後代（不只是子元素、子元素向下遞迴）元素F | 1 |
| E>F | 子元素選擇器 | 匹配E元素的所有直接子元素 | 2 |
| E+F | 直接相鄰選擇器 | 匹配E元素之後的相鄰的同級元素F | 2 |
| E~F | 普通相鄰選擇器（弟弟選擇器） | 匹配E元素之後的同級元素F（無論直接相鄰與否） | 3 |
五、屬性選擇器
| 選擇器 | 示例 | 示例說明 | CSS |
|---|---|---|---|
| [attribute] | [target] | 選擇所有帶有target屬性元素 | 2 |
| [attribute=value] | [target=-blank] | 選擇所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 選擇標題屬性包含單詞"flower"的所有元素 | 2 |
| [attribute ^= language] | [lang ^= en] | 選擇一個lang屬性的起始值="EN"的所有元素 | 2 |
| [attribute $= language] | [lang $= en] | 選擇一個lang屬性的結尾值="EN"的所有元素 | 2 |
| [attribute *= language] | [lang *= en] | 選擇一個lang屬性的包含"EN"的所有元素 | 2 |
六、偽類選擇器
| 選擇器 | 示例 | 示例說明 | CSS |
|---|---|---|---|
| :link | a:link | 選擇所有未訪問連結 | 1 |
| :visited | a:visited | 選擇所有訪問過的連結 | 1 |
| :hover | a:hover | 把滑鼠放在連結上的狀態 | 1 |
| :active | a:active | 選擇正在活動連結 | 1 |
| :focus | input:focus | 選擇元素輸入後具有焦點 | 2 |
七、偽元素選擇器
| 選擇器 | 作用 | 說明 | CSS |
|---|---|---|---|
| ::before/:before | 在被選元素前插入內容。 | 需要使用 content 屬性來指定要插入的內容。被插入的內容實際上不在文件樹中。 | 2 |
| ::after/:after | 在選被元素後插入內容 | 其用法和特性與:before相似。 | 2 |
| ::first-letter/:first-letter | 匹配元素中文字的首字母。 | 被修飾的首字母不在文件樹中。 | 1 |
| ::first-line/:first-line | 匹配元素中第一行的文字。 | 這個偽元素只能用在塊元素中，不能用在內聯元素中。 | 1 |