基础选择器
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)
选择所有⽗元素的第⼆个满⾜条件的⼦元素
Caleb https://reinness.com/posts/44 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自小陈博客 ！
