On this page

选择器中的正则表达式

字符 ^ 表示字符串开始位置匹配
字符 $ 表示字符串结束位置匹配
字符*表示字符串任意位置匹配
字符 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 这个属性就可以

<div attr="val"> </div>
<div attr="text val"> </div>
<div attr="value"> </div> N
<div attr="val-ue"> </div>

[attr="val"] 匹配上

元素的属性名是"attr", 值必须是'val'

<div attr="val"></div> ✅
<div attr="text val"> </div> ❎
<div attr="value"> </div> ❎
<div attr="val-ue"> </div> ❎

[attr=~"val"] 匹配上

"attr"值需含有单词"val"

<div attr="val"></div> ✅
<div attr="text val"></div> ✅
<div attr="value"> </div> ❎
<div attr="val-ue"></div> ❎

[attr|="bar"]

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

<div attr="bar"></div> ✅
<div attr="bar-val"></div> ✅
<div attr="barval"></div> ❎
<div attr="bar val"></div> ❎

[attr^='val']

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

<div attr="val"></div>
<div attr="text val"></div>
<div attr="value"></div>
<div attr="val-ue"></div>

[attr$='val']

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

<div attr="val"></div>
<div attr="text val"></div>
<div attr="value"></div>

[attr*='val']

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