1、基本选择器

* 通配符，匹配任何元素
p 标签选择器
.logo class 选择器
#app 标签选择器

2、多元素组合选择器

p,h 并集选择器
.span-normal.logo 交集选择器，即是class为.span-normal又是.logo的元素(两个选择器无空格)
div p 后代选择器，匹配div中所有的p
div > p 子代选择器，只匹配下一级中的所有 p

3、属性选择器

span[idx] 匹配具有idx属性的span元素
span[idx=1] 匹配idx属性为1的span元素
li[perm_type^=’user’] 匹配perm_type属性为user开头的元素
li[perm_type$=’edit’] 匹配perm_type属性为edit结尾的元素
li[perm_type*=’lock’] 匹配perm_type属性为带有lock的元素

4、伪类选择器

a:link 超链接的初始状态
a:hover 鼠标悬停的状态
a:active 鼠标点击时的状态
a:visited 点击之后的状态
div :not(p) 匹配div中除了p以外的其他元素
input:focus 匹配获取焦点的input 元素

结构性伪类

.banner :first-child 匹配banner中第一个子元素
.banner :last-child 匹配banner中最后一个子元素
.banner div:nth-child(odd) 匹配banner中的从开始排序偶数的div，第一个编号为1
.banner div:nth-last-child(even) 匹配banner中的从后面排序奇数的div

表单伪类

input:disabled 匹配禁用的input元素
input:enabled 匹配激活的input
checkbox:checked 匹配选中的checkbox
p::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

image.png

5、伪元素选择器

E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容