css3选择器

146 阅读1分钟

css选择器

css属性选择器

  • [attribute] //具有attribute属性
  • [attribute=value] //属性attribute值为value
  • [attribute^=value] //属性attribute的值以value开头,valueyou
  • [attribute|=value] //属性attribute 包含以value或者value-开头,valueyou value-you
  • [attribute$=value] //属性attribute的值以value结尾,youvalue,
  • [attribute*=value] //属性attribute包含value就行 ivalueyou
  • [attribute~=value] //属性attribute包含以空格分开的value, i value you

伪类选择器

作为修饰,修饰前面的E元素

  • E:first-child 选中E元素,并且E作为父元素的第一个子元素
  • E:last-child
  • E:nth-child(n) // 数字,关键字even,odd,公式2n+1
  • E:first-of-type 选中E元素,并且E作为子元素中,同类型的第一个E
  • E:last-of-type
  • E:nth-of-type(n)
  • E:enabled
  • E:disabled
  • E:checked
  • E:not(.class)

伪元素选择器

插入了内容,页面上看起来好像行内元素,但dom里看不到。必须要有content属性

  • ::before
  • ::after

通配符选择器

  • E F 后代选择器
  • E>F 子选择器
  • E~F 兄弟选择器
  • E+F 相邻兄弟选择器
  • E,F 并行选择器
    • 所有