CSS 的选择器

这是一篇关于CSS 的选择器的思维导图，主要内容包括：伪元素选择器，伪类选择器，属性选择器，关系选择器，复合选择器，基本选择器。

CSS 的选择器

• 基本选择器
  • 标签选择器：div、p、body、span...
  • 类选择器：class
  • id选择器：id
  • 通配符选择器：*
• 复合选择器
  • 交集选择器： p.c1 , .c1#p1
  • 并集选择器：p,c1,#p1
• 关系选择器
  • 父子关系：父亲>儿子
  • 祖先后代：div span
  • 兄弟离哥最近：兄+弟
  • 选择所有弟： 兄~弟
• 属性选择器
  • [属性] 含有指定属性： [title]
  • [属性=属性值] 指定属性和属性值：[title=a]
  • [属性^=属性值] 指定属性且以该属性值开头的：[title^=a]
  • [属性$=属性值] 指定属性且以该属性值结尾的: [title$=a]
  • [属性*=属性值] 指定属性且含有该属性值的： [title*=a]
• 伪类选择器
  • 元素选择伪类选择器
    • 选择器
      • :first-child
      • :last-child
      • :nth-child
      • first-of-type
      • :last-of-type
      • :nth-of-type
    • 用法
      • 有空格：所有元素子元素
      • 无空格：从当前元素开始
  • 否定伪类选择器
    • :not
  • A链接的伪类选择器
    • :hover
    • :active
    • :visited
    • :link
• 伪元素选择器
  • p::first-letter 首字符 块级元素
  • p::first-line 首行 块级元素
  • p::selection 选中的
  • ::before 第一个字符之前 配合content一起使用
  • ::after 最后一个字符之后 配合content一起使用