一、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 |
一切伪元素挑选器在前端面试题-伪类和伪元素
扩大浏览
- 前端面试题-clearfix（消灭浮动）
- 前端面试题-BFC(块格式化上下文)
