CSS选择器思维导图

这是一篇关于css选择器这知识梳理的思维导图，该思维导图列出了常用的选择器和属性，比较系统全面地总结了关于这一部分的知识点。

CSS选择器

• 基本选择器
  • 标签选择器
    • 注意点
      • 选中所有的标签
      • 无论藏得多深，都能被选中
      • 只要是HTML的标签，都可作为标签选择器
  • id选择器
    • 注意点
      • 同一界面，id不可重复
      • id选择器，前加#
      • 每个标签，都可设置id
      • 名称书写规范
        • 只能由字母/数字/下划线，a-z 0-9 _
        • 不能以数字开头
        • 不能是HTML标签的名称，不能是a h1 img input ...
      • 一般不用id设置样式，留给js使用
  • 类选择器
    • 注意点
      • 可以重复
      • 前面加 .
      • 和id规范一样
      • 每个标签可绑定多个类名
      • 避免代码冗余，抽取公共代码
    • 和id的区别
      • id不能重复，class可以
      • HTML标签，只能绑定一个id，class可以多个
      • id以#开头，class以.开头
      • id配合js使用，class设置样式
  • 通配符选择器
    • 作用
      • 所有标签，设置属性
    • 格式
      • *{ 属性: 值; }
    • 注意点
      • 由于是设置所有标签的属性, 会遍历所有标签, 如果标签较多, 性能会比较差,
      • 所以在企业开发中，一般不使用通配符选择器
• 级联选择器
  • 后代选择器
    • 格式
      • 标签1 标签2
    • 注意点
      • 空格隔开
      • 不仅是儿子，所有后代
      • 不仅使用标签名称，还可用其它选择器
      • 可以通过空格，一直延续
  • 子元素选择器
    • 格式
      • 标签1>标签2
    • 注意点
      • 只查找儿子
      • 用>连接，不能有空格
      • 也能用其它标签
      • 可以通过>，一直延续
  • 交集选择器
    • 格式
      • 选择器1选择器2
    • 注意点
      • 没连接符号
      • 可用 标签名/id/class
      • 仅仅作为了解，开发中用的不多
  • 并集选择器
    • 格式
      • 选择器1,选择器2
    • 注意点
      • 用，连接
      • 可用 标签名/id/class
  • 兄弟选择器
    • 相邻兄弟
      • 格式
        • 选择器1+选择器2
      • 注意点
        • 只能紧跟其后的标签，不能选择隔开的
    • 通用兄弟
      • 格式
        • 选择器1~选择器2
      • 注意点
        • 选中的所有标签，不论又没被隔开
• 组合选择器
  • 多个选择器组合使用
  • 例如 "div.one" 表示class为one的div元素
• 属性选择器
  • 属性
    • 作用
      • 根据属性名, 设置属性
      • 格式
        • [attribute]
  • 属性=属性值
    • 作用
      • 属性值等于value, 设置属性
    • 格式
      • [attribute=value]
    • 常用场景
      • 区分input属性
  • 属性值开头
    • 隔开
      • 格式
        • [attribute|=value]
      • 作用
        • value开头，value被-和其它内容隔开的，CSS2
    • 不用隔开
      • 格式
        • [attribute^=value]
      • 作用
        • value开头，都可找到, 无论有没被隔开，CSS3
  • 属性值结尾
    • 格式
      • [attribute$=value] CSS3
  • 是否包含特定的值
    • 独立
      • 格式
        • [attribute~=value]
      • 作用
        • 独立的单词, 包含value，空格隔开，CSS2
    • 包含
      • 格式
        • [attribute*=value]
      • 作用
        • 包含value，就可以找到，CSS3
• 伪元素选择器
  • 伪类选择器
    • 以 : 开头
    • 序选择器
      • 同级别中的第几个
        • :first-child
          • 第一个标签
        • :last-child
          • 最后一个
        • :nth-child(n)
          • 第n个标签
          • :nth-child(odd)
            • 所有奇数
          • :nth-child(even)
            • 所有偶数
          • :nth-child(xn+y)
            • x和y是用户自定义的, 而n是一个计数器, 从0开始递增
          • :nth-last-child(n)
            • 倒数第几个
          • :only-child
            • 仅有的一个子元素E，仅有一个子元素时生效
          • 注意点
            • 不区分类型
      • 同级别同类型第几个
        • :first-of-type
          • 同类型的第一个标签
        • :last-of-type
          • 最后一个
        • :nth-of-type(n)
          • 第n个
        • :nth-last-of-type(n)
          • 倒数第n个
        • :only-of-type
          • 特定类型的唯一子元素
    • 动态伪类选择器
      • E:link
        • 未被访问过的超链接
        • 常用于链接锚点
      • E:visited
        • 访问过的超链接
        • 链接锚点
      • E:active
        • 匹配E元素，且被激活
        • 链接锚点、按钮
      • E:hover
        • 鼠标悬停
        • IE6及以下，仅支持a:hover
    • a标签的伪类选择器
      • :link
        • 未被访问过，默认状态
      • :visited
        • 被访问过
      • :hover
        • 鼠标悬停
      • :active
        • 鼠标长按
      • 注意点
        • 可单独出现，也可一起出现
        • 一起出现, 有顺序要求
        • :link -> :visited -> :hover -> :active（love hate）
        • 默认和被访问状态，样式一样, 可以缩写
          • 直接a{ color: ; }
    • 否定伪类
      • 作用
        • 从已选中的元素中，剔除某些元素
      • 语法
        • :not(选择器)
• 伪元素选择器
  • ::after
    • 元素最后边的部分
    • 结合content使用
    • 通过content，向after的位置添加内容
  • ::before
    • 最前边的部分
    • 结合content使用
    • 向before的位置添加内容
  • ::first-letter
    • 为第一个字符设置样式
  • ::first-line
    • 为第一行设置样式