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后让第二个选择器选中的标签执行什么效果
$\color{orange}{注意：}$
:hover 只能选中目标元素本身以及其子元素无法选中其父元素和兄弟元素
:active 正在点击
$\color{orange}{注意：}$
四个伪类选择器必须按照顺序来定义
:hover不能设置在:link :visited之前会被覆盖
:active 不能设置在:hover之前
:link 和 :visited顺序不强制要求
表单相关的伪类
1.:focus 当表单元素获取焦点

伪元素：

1.::before 在目标元素第一个子元素的前面插入一个伪元素
2.::after 在目标元素第一个子元素的后面插入一个伪元素
3.::first-letter 给元素内第一个文字或者字母设置样式
4.::selection 设置用户选中部分的样式

css选择器