交集选择器

  • 例： div.red {color：red；}
    • 选取class属性为red 的div标签

并集选择器

  • 例： div，p {color：red；}

    • 选取div、p标签下所有节点
    • ，表示并集，可以同时选取多个标签

      后代选择器

  • 例： #menu div {color：red；}

    • 选取id为menu下面的div标签
    • 空格隔开就是表示下一个子节点
    • 其中选取所有后代

子元素选择器

  • 例： #menu>div {color：red；}
    • 选取id为menu下面的div标签

    • 连接就表示下一个节点

    • 只选取第一层后代

属性选择器

  • div[class] 选取所有div带有class属性的标签
  • div[class=”nav”] 选取所有div下class属性等于nav的标签
  • div[class*=”hi”] 选取所有div下class属性中包含hi的标签，其中hi可以在任意位置
  • div[class^=”hi”] 选取所有div下class属性值中开头为hi的标签
  • div[class$=””hi] 选取所有div下class属性值中结尾为hi的标签

伪元素选择器

  • p::first-letter 选取p标签的文本的第一个字符
  • p::first-line 选取p标签的文本的第一行
  • p::selection 选取p标签中被鼠标选中的文本
  • p::after 选取p标签的文本的开头
  • p::before 选取p标签的文本的开头
    • after和before搭配content使用，可以为文本添加开头结尾，但是文本不能被鼠标选取