css选择器

css选择器知识思维导图，包括：元素、选择器、分组、类、id、属性、后代、子元素、相邻兄弟。

css选择器

• 元素
  • html
  • h1
• 选择器分组
  • 逗号分组
  • 通配符＊
  • 声明分组
• 类
  • 类
  • 多类class="xxx zzzz" .xxx{color:red;}.zzz{background:red;}
• id
  • #
  • 类区别 不能重复 不能使用ID列表 可包含更多含义
• 属性
  • [属性名]
  • xml使用属性选择器方法节点名[属性名]
  • 部分属性值选择p[class~="important"]只需要含有这个属性值
    • 如果没有"~"则需要完全相等 如果p的class="x impotent"则选择不到
  • 部分属性选择器可以用于任何属性，不只class
  • 子串匹配属性选择器
    • abc^="x"以x开头的元素
    • abc$="x"以x结尾的元素
    • abc*="x"包含x的元素
  • 特定属性选择＊[lang|="en"选择lang属性等于en或者en-开头的元素
• 后代
  • 根据上下文选择元素h1 em
• 子元素
  • 只选择某元素的子元素h1>strong只选择第一个h1下的strong
• 相邻兄弟
  • h1+p会选择兄弟元素师是p的所有h1元素
• 伪类
• 伪元素