css速成 36种选择器总结（新手必备）

四种基本选择器

1. 通配符*
   决定整个页面的元素（优先级低）
2. 标签选择器*
   选择特定的标签
3. 类名选择器*
   选择有类名的选择器
4. id选择器
   选择拥有id并且匹配的标签

五种符号选择器

1. 逗号选择器
   满足逗号左边 或者逗号右边都算
2. 空格选择器
   满足嵌套关系
   空格后面是空格前面的子元素（多代）
3. 大于选择器
   满足嵌套关系
   大于号后面是前面的子元素（一代）
4. 加号选择器
   满足并列关系
   加号后面单个元素紧临前面的元素 改变后面的元素
5. ~选择器
   满足并列关系
   ~后面满足的元素都可以改变

六种属性选择器

1.[属性名]{}
拥有属性名的标签
2. [属性名=“val”]{}
拥有属性名并且值为val的标签
3. [属性名^=“val”]{}
拥有属性名并且值以val开头
4. [属性名$=“val”]{}
拥有属性名并且值以val的结尾
5. ==[属性名="val“]{}==*
有属性名并且包含val内容
6. [属性名~="val“]{}
拥有属性名并且值其中一个等于val

七种伪类选择器

1.：link
超级链接未访问状态
2. ：visited
超级链接访问后的状态
3. ：hover
鼠标划入状态
4.：active
鼠标划入并按下的状态
5. ：focus
聚焦
6. ：disabled
禁用
7. ：checked
选中

十四种特殊选择器

1. :first-child
   第一个子元素 冒号前面的必须作为他父类的第一个子元素
2. :last-child
   最后一个子元素 冒号前面的必须作为他父类的最后一个个子元素
3. :nth-child(n)
   作为父标签的第N个子标签
   数字、even偶数、odd奇数
4. :nth-last-child(n)
   作为父标签的倒数第N个子标签
   数字、even偶数、odd奇数
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-child
    当前类型唯一一个
11. :not()
    否定 满足前面 但是不满足后面
12. :empty
    空 选择内容为空的选择器
13. ::before
    在当前元素的第一个子元素前面添加元素属性
14. ::after
    在当前元素的最后一个子元素后面添加元素属性