前端初学者必学的34个CSS选择器

4种 基本选择器

1. *{} 通配符选择器 ：选择所有标签
2. tag {} 标签选择器：选择所有匹配标签（一般前面会带有其他完整选择器）
3. .class {} 类名选择器：选择匹配类名
4. #id {} id选择器：选择匹配id（多用于js元素交互）
   优先级：通配符选择器<标签选择器<类名选择器<id选择器

5种 符号选择器

1. 逗号选择器：两边独立，满足一个即可
2. 空格选择器：满足嵌套关系，两边独立，右边是后代元素，子、孙、曾孙元素等都可
3. 大于号选择器：满足嵌套关系，两边独立，右边是左边直接子元素
4. 加号选择器：满足并列关系，两边独立，右边是左边下一个紧邻元素
   例：.container .item+.item 不选第一个
5. 波浪号选择器：满足并列关系两边独立，右边是左边下面的元素，同级父元素

6种 属性选择器

1. [attr] {}：拥有属性attr即可
2. [attr=“value”] {}：拥有属性attr并且值是value
3. [attr^=“val”] {}：拥有属性attr并且值是以val开头
4. [attr$=“ue”] {}：拥有属性attr并且值是ue结尾
5. [attr*=“lu”] {}：拥有属性attr并且值包含lu，lu是值的一部分
6. [attr~=“value1”] {}：拥有属性attr 并且其中一个值是value1，类名选择器

7种 伪类选择器

状态伪类

1. :checked：选框选中状态
2. :disabled：元素禁用（:enable 元素启用）
3. :focus：聚焦（:blur 失焦）outline 文本外框

动态伪类

1. :link：超级链接未访问，默认蓝色
2. :visited：超级链接访问过，默认紫色
3. :hover：鼠标划入
4. :active：鼠标点击
5. 注意事项：

• :link和:visited只有a标签可用
• :hover和:avtive所有标签都可用
• :hover的顺序只能在:link和:visited后面，:active只能在:hover后面，:link和:visited顺序前后无所谓

10种特殊选择器

1. :first-child：第一个子元素，冒号前面的元素必须作为父元素的第一个子元素
2. :last-child： 最后一个子元素
3. :nth-child(n)：正数第n个，冒号前面的元素必须是父元素的第几个
4. :nth-last-child(n)：倒数第n个，冒号前面的元素必须作为父元素的倒数第几个
5. :only-child：唯一一个元素，冒号前面的元素必须作为父元素唯一的一个子元素

只考虑当前类型

6. :first-of-type：当前标签是本类标签的第一个，只考虑当前这个标签的类型
7. :last-of-type：当前类型最后一个
8. :nth-of-type(n)：当前类型第n个
9. :nth-last-of-type(n)：当前类型倒数第n个
10. :only-of-type：当前类型唯一一个

2种 否定选择器

1. :not()：满足not前面但not不满足not后括号里面的内容
2. :empty：选择内容为空的元素

代码示例

<h1>我是老大</h1>
    <h2>我是老二</h2>
    <div class="container">
        <h2>yeah</h2>
        <div>这是第1个div</div>
        <div>这是第2个div</div>
        <div>这是第3个div</div>
        <div>这是第4个div</div>
        <div>
            <div>这是第5个div</div>
        </div>
        <span>last-child</span>
        <span>这是第1个span</span>
        <span>这是第2个span</