1.常见选择器
（1）id选择器
（2）类选择器
（3）标签选择器
（4）后代选择器
（5）群组选择器
（ 6）子代选择器
<style>
#p1{} id选择器
.div{} 类选择器
img{} 标签选择器
.div img{} 后代选择器
.box1,.box2{} 群组选择器
.div>div{} 子代选择器
</style>
<body>
<div class="div">
<div class="box1"></div>
<div class="box2"></div>
<img src="" alt="">
<p id="p1"></p>
</div>
</body
2. 属性选择器
[属性名=属性值]可以更加精准的根据属性来选择标签
[属性名~=属性值]选择属性值中含有指定单词的标签
[属性名|=属性值]选择属性值中以指定值开头的标签，必须是第一个字母
[属性名^=属性值]选择属性值中以指定值开头的标签，带有指定的字母就行
[属性名*=属性值]选择属性值中带有指定值的标签，只要包含相同的字母就行
3. 伪元素选择器
1.+兄弟选择器 选择指定标签 其同父级 紧挨着的 下一个兄弟元素
2.:first-child 选择每一个作为其父元素 第一个子元素 的指定标签
3.:first-of-type 选择每一个父元素下面的第一个指定标签
4.:last-child 选择每一个作为其父元素 最后一个子元素 的指定标签
5.:last-of-type 选择每一个父元素下面的 最后一个指定标签
6.:not(p) 选择每个 不是 指定标签 的标签
7.:nth-child(n) 选择每一个父元素下面的 第n个子元素 的 目标元素
8.:nth-of-type(n) 选择每一个父元素下面的 第n个 目标元素
9.:nth-last-child(n) 选择每一个父元素下面的 倒数第n个子元素 的 目标元素
4.伪类选择器
1.:link 未点击之前
2.:visited 点击之后
3.:hover 鼠标悬浮
4.选择器:hover{}
当前被选中的标签 在hover后 执行什么效果
选择器:hover 选择器{}
第一个选择器 选中的标签在hover后 让第二个选择器选中的标签 执行什么效果
:hover 只能选中 目标元素本身 以及其子元素 无法选中其父元素和兄弟元素
:active 正在点击
四个伪类选择器必须按照顺序来定义
:hover不能设置在:link :visited之前 会被覆盖
:active 不能设置在:hover之前
:link 和 :visited顺序不强制要求
表单相关的伪类
1.:focus 当表单元素 获取焦点
伪元素：
1.::before 在目标元素第一个子元素的前面 插入一个伪元素
2.::after 在目标元素第一个子元素的后面 插入一个伪元素
3.::first-letter 给元素内第一个文字 或者字母设置样式
4.::selection 设置用户选中部分的样式
