css的基础选择器

集合选择器

• div.red

并集选择器

• h1,span
  • 选择多个选择器

关系选择器

• 父元素

• 子元素

• 祖先元素

• 后代元素

• 兄弟元素

• 子元素选择器

  • 父元素>子元素
    • div > span:选择div的子元素span

• 后代选择器

  • 祖先 后代
    • div span: 选择div的后代元素span

• 下一个兄弟选择器

  • 前一个 + 下一个
    • p + span

• 下边所有兄弟选择器

  • 兄~弟

属性选择器

• <p title="abc">1</p>
  <p title="abcd">2</p>
  <p title="hello">3</p>
  <p title="111">4</p>
  <p></p>
  

• [属性名]选择含有指定属性的元素

  • p[titlle]

• [属性名=属性值]选择含有指定属性和属性值的元素

  • p[title=abc]

• [属性名^=属性值]选择含有指定属性和属性值开头的元素

  • p[title^=abc]

• [属性名$=属性值]选择含有指定属性和属性值结尾的元素

• [属性名*=属性值]选择含有指定属性和某属性值的元素

伪类选择器

• 伪类用来描述一个元素的特殊状态
  • 比如第一个元素，被点击的…
  • 伪类一般情况是：开头
    • :first-child 第一个子元素
    • :last-child 最后一个子元素
    • :nth-child() 选择第n个子元素
      • 特殊值
        • 0~正无穷个选择
        • 2n 选中o数位
        • 2n+1 选择奇数位 odd
        • even o数位
    • 依照所有的元素进行排序
    • :first-of-type
    • :last-of -type
    • :nth-of-type()
      • 这几个伪类的功能和上面的类似，不同点是在同类型排序
    • not() 否定伪类
      • 将符合条件的元素在选择器中去除
        • ul > li:not(:nth-child(3))