• 字符^表示字符串开始位置匹配
  • 字符$表示字符串结束位置匹配
  • 字符*表示字符串任意位置匹配
  • 字符i表示字符串匹配不区分大小写
  • 字符g表示字符串全局匹配

CSS2.1属性选择器

  • 直接匹配: [attr]、 [attr=”val”]、 [attr~=”val”]、 [attr|=”val”]

    CSS3属性选择器

  • 正则匹配: [attr^=’val], [attr$=’val], [attr*=’val’]

    CSS4属性选择器

    忽略大小写匹配: [attr=’val’ i]

CSS属性选择器分解:

[attr]

只要元素有attr这个属性就可以

  • N

[attr=”val”] 匹配上

元素的属性名是”attr”,值必须是’val’

  • ✅
  • ❎
  • ❎
  • ❎

[attr=~”val”] 匹配上

“attr”值需含有单词”val”

  • ✅
  • ✅
  • ❎
  • ❎

[attr|=”bar”]

“attr”属性值开头必须是bar的单词，或者开头是bar-

  • ✅
  • ✅
  • ❎
  • ❎

[attr^=’val’]

属性值开头三个字符需要是val

[attr$=’val’]

属性值最后三个字符需要是val

[attr*=’val’]

属性值只要包含三个字符就可以了