一、基础选择器
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
二、复合选择器
1. 后代选择器（包含选择器）
后代选择器名之间用空格隔开
2. 子代选择器
子代选择器用 > 连接，如：选择器1 > 选择器2；注意：层级不能省略，否则没有效果
3.并集选择器
语法：选择器1, 选择器2 {css}；可以同时控制多个目标标签
4.交集选择器
交集选择器：用多个条件来找到一个目标；例如：选择器名1选择器名2 {css}；选择器之间没有任何分隔字符
5.伪类选择器
| 伪类选择器 | 说明 |
|---|---|
| a:link | 选中a链接未访问过的状态 |
| a:visited | 选中a链接访问之后的状态 |
| E:hover | 鼠标移动到目标，鼠标悬停效果 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:first-child | 匹配父元素中第一个子元素，并且是E元素（IE6不支持） |
| E:last-child | 匹配父元素中最后一个子元素，并且是E元素 |
| :first-of-type | [CSS3]选择一个上级元素下的第一个同类子元素 |
| :last-of-type | [CSS3]选择一个上级元素下的最后一个同类子元素 |
| :only-child | [CSS3]选择的元素是他的父元素的唯一一个子元素（IE6-8不支持） |
| :only-of-type | [CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持） |
| E:nth-child(n) | [CSS3]匹配父元素中第n个子元素，并且是E元素。（IE6-8不支持） |
| E:nth-last-child(n) | [CSS3]匹配父元素中倒数第n个子元素，并且是E元素（IE6-8不支持） |
| E:nth-of-type(n) | [CSS3]只在父元素的同类型(E)子元素范围中，匹配第n个（IE6-8不支持） |
| E:nth-last-of-type(n) | [CSS3]只在父元素的同类型(E)子元素范围中，匹配第n个，从元素的最后一个开始计算（IE6-8不支持） |
n的注意点：n为：0、1、2、3...，通过n可以组成常见公式：偶数（2n，even）、奇数（2n-1，odd）、找到前五个（-n+5）、找到从第五个往后（n+5）
超链接伪类选择器：如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
焦点伪类选择器E:focus，用于选中元素获取焦点时状态，常用于表单控件
6.属性选择器
- E[attr]：只使用属性名，但没有确定任何属性值；
- E[attr="value"]：指定属性名，并指定了该属性的属性值；
- E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
- E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
- E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
- E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
- E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;
7.相邻选择器
相邻选择器用来“+”号表示，+号左右两个选择器，选择第一个选择器后面紧跟着的第二个选择器，两个选择器的元素必须是相邻关系才行。
8.伪元素选择器
伪元素选择器：就是有连续两个冒号的选择器，如::first-line、::first- letter、::before、 和::after
- ::first-letter（文本的第一个单词或字（如中文、日文、 韩文等））
- ::first-line（文本第一行）
- ::before（在元素的内容前面插入新内容）
- ::after（在元素的内容后面插入新内容）
注意点：
1.必须设置content属性才能生效，
2.伪元素默认是行内元素。
3.单标签没有伪元素, img标签除外, 当图标加载失败的时候, 伪元素才会显示
