CSS常用选择器

👉 基础选择器

👉 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)

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