基础选择器

1. id 选择器

直接使用Id进行查找，例如 #box

2. class 选择器

使用.class查找。如果想给⼀个标签设置多个class时将多个class名称分别写出 中间⽤空格分隔开

3. 多重组合选择器

两个名称之间要⽤，逗号分隔开 样式为 .xxx,.xxx

属性选择器

1. [attr]/[id]

根据 属性名称 查找元素

2. [attr=value]/[class=box]

根据 属性名称=属性值 查找元素

3. [attr~=value]

包含指定的词汇的元素 value 必须是完整的单词

4. [attr|=value]

属性值 以某个指定的单词 开头的 元素（top-cnter）

5. [attr^=value]

属性值 以指定的字⺟或单词开头的元素

6. [attr*=value]

属性值 包含指定的字⺟或单词的元素

结构选择器

后代选择器 parent_ele children_ele

⽗元素所有的⼦元素

⼦级选择器 parent_ele>children_ele

⽗元素的第⼀⼦级

兄弟选择器 children_ele=children_ele

相邻兄弟之间的选择器

伪元素

1. ::after

在每个元素的内容后插⼊⼀些内容

2. ::before

在每个元素的内容前插⼊⼀些内容

3. ::first-letter

选择每个元素的第⼀个字⺟

4. ::first-line

选择每个元素的第⼀⾏

5. ::selection

选择⽤户选择的元素的部分

表单相关伪类

1. :checked

点击type类型为 radio checkbox

2. :disabled

选择每个禁⽤的<input>元素

3. :enabled

选择每个启⽤的<input>元素

4. :focus

选择具有焦点的<input>元素

5. :in-range

选择值在指定范围内的<input>元素（number）

6. :invalid

选择所有具有⽆效值的<input>元素

7. :valid

选择所有具有有效值的<input>元素

8. :optiona

选择没有“required”属性的<input>元素

9. :read-only

选择具有指定“readonly”属性的<input>元素

10. :read-write

选择没有“readonly”属性的<input>元素

伪类选择器

1. :empty

没有内容（空格或换⾏符或制表符）或⼦元素的 元素

2. ele:first-child

作为⽗元素的顺序排列符合要求的第⼀个⼦元素

3. ele:first-of-type

作为⽗元素的第⼀个符合要求的⼦元素

4. ele:last-child

作为⽗元素的顺序排列符合要求的最后⼀个⼦元素

5. :nth-last-child(n)

选择所有⽗元素倒数第⼆个满⾜要求的⼦元素

6. :only-child

选择所有⽗元素中有且只有⼀个满⾜要求的元素

7. :only-of-type

选择所有⽗元素中唯⼀的⼀个满⾜要求的元素

8. :target

选择当前活动的#news元素（点击包含该锚点名称的⽹址）

9. :nth-last-of-type(n)

选择每个作为⽗元素的倒数第⼆个满⾜要求的元素

10. :nth-of-type(n)

选择所有⽗元素的第⼆个满⾜要求的元素

11. ele:last-of-type

作为⽗元素的倒数第⼀个符合要求的⼦元素

12. :root

根元素（html为根）

13. :not(selector)

除了这个剩下都要

14. :nth-child(n)

选择所有⽗元素的第⼆个满⾜条件的⼦元素