css选择器

一图总结全部的css选择器，包括权重、声明、释义等，帮助快速开发css。希望对您有所帮助。

选择器

• 基本选择器
  • 通用选择器
    • 权重 0
      • *
  • 标签选择器
    • 权重 1
      • elementname
  • 类名选择器
    • 权重10
      • .classname
  • ID选择器
    • 权重100
      • #idname
  • 属性选择器
    • 权重10
      • [attr]
        • 表示带有以 attr 命名的属性的元素
      • [attr=value]
        • 表示带有以 attr 命名的属性，且属性值为 value 的元素
      • [attr~=value]
        • 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value
      • [attr|=value]
        • 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀
          • 典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）
      • [attr^=value]
        • 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素
          • 涵盖范围比[attr|=value]广，比如可以选择 value-one 与 value2， 而[attr|=value]只能选择前者
      • [attr$=val]
        • 属性以指定值结尾的元素
      • [attr*=value]
        • 表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素
      • [attr operator value i]
        • 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写
      • [attr operator value s]
        • 在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写
• 分组选择器
  • element, element, element
    • 将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点，又作选择器列表、并集选择器、并集组合器
• 组合选择器
  • 后代选择器
    • selector1 selector2
      • 选择前一个元素的后代节点
  • 子选择器
    • selector1 > selector2
      • 选择前一个元素的直接子代的节点
  • 兄弟选择器
    • selector1 ~ selector2
      • 选择兄弟元素，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
  • 相邻兄弟选择器
    • selector1 + selector2
      • 选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点
• 伪选择器
  • 伪类选择器 :
    • 条件伪类
      • :lang()：基于元素语言来匹配页面元素；
      • :dir()：匹配特定文字书写方向的元素；
      • :has()：匹配包含指定元素的元素；
      • :is()：匹配指定选择器列表里的元素；
      • :not()：用来匹配不符合一组选择器的元素；
    • 行为伪类
      • :active：鼠标激活的元素；
      • :hover： 鼠标悬浮的元素；
      • ::selection：鼠标选中的元素；
    • 状态伪类
      • :target：当前锚点的元素；
      • :link：未访问的链接元素；
      • :visited：已访问的链接元素；
      • :focus：输入聚焦的表单元素；
      • :required：输入必填的表单元素；
      • :valid：输入合法的表单元素；
      • :invalid：输入非法的表单元素；
      • :in-range：输入范围以内的表单元素；
      • :out-of-range：输入范围以外的表单元素；
      • :checked：选项选中的表单元素；
      • :optional：选项可选的表单元素；
      • :enabled：事件启用的表单元素；
      • :disabled：事件禁用的表单元素；
      • :read-only：只读的表单元素；
      • :read-write：可读可写的表单元素；
      • :blank：输入为空的表单元素；
      • :current()：浏览中的元素；
      • :past()：已浏览的元素；
      • :future()：未浏览的元素；
    • 结构伪类
      • 
      • :root：文档的根元素；
      • :empty：无子元素的元素；
      • :first-letter：元素的首字母；
      • :first-line：元素的首行；
      • :nth-child(n)：元素中指定顺序索引的元素；
      • :nth-last-child(n)：元素中指定逆序索引的元素；；
      • :first-child ：元素中为首的元素；
      • :last-child ：元素中为尾的元素；
      • :only-child：父元素仅有该元素的元素；
      • :nth-of-type(n) ：标签中指定顺序索引的标签；
      • :nth-last-of-type(n)：标签中指定逆序索引的标签；
      • :first-of-type ：标签中为首的标签；
      • :last-of-type：标签中为尾标签；
      • :only-of-type：父元素仅有该标签的标签；
  • 伪类元素
    • ::before
      • ：在元素前插入内容；
    • ::after
      • ：在元素后插入内容；