CSS常用选择器

Caleb ... 2020-04-09
  • CSS
  • 常用选择器
大约 2 分钟

# 基础选择器

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

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