你好，CSS “正则”了解一下
前面一篇文章中有位同学在评论区留言说我的
demo代码中学到了[class^=ani]的写法，于是决定水一篇关于css中的正则的文章。
虽然题目讲的是 CSS 中的正则，但是这加了引号的正则其实只和正则有一半的关系，而且还是个阉割版，但是，请不要因此就小瞧了它，有时候能够有奇效。
万用的属性选择器
CSS 中的“正则”主要存在于属性选择器中，没错就是它： [attr]，除了最常见的 [attr] 和 [attr=value] 两种写法外，属性选择器还支持以下几种十分强大的写法：
- [attr~=value]
- [attr|=value]
- [attr^=value]
- [attr$=value]
- [attr*=value]
可以看出，前两种其实和正则就没啥关系了，后三种写法的特殊符号我们在正则中经常会看到，而且他们的含义也是相通的，下面我们一个个来讲。
[attr~=value]
该选择器表示可匹配到值中用空格分割后存在 value 的属性，比如可匹配：
<div attr="value xxx"></div>
<div attr="value"></div>
<div attr="xxx value"></div>
[attr|=value]
该选择器表示可匹配到以 value- 开头的属性值，比如可匹配：
<div attr="value-"></div>
<div attr="value-xxx"></div>
[attr^=value]
此选择器很好理解，和正则类似，表示可以匹配到属性值为 value 开头的元素：
<div attr="value"></div>
<div attr="valuexxx"></div>
[attr$=value]
此选择器也和正则类似，表示可以匹配到属性值为 value 结尾的元素：
<div attr="value"></div>
<div attr="xxxvalue"></div>
[attr*=value]
此选择器依旧和正则类似，表示可以匹配到属性值中存在 value 的元素：
<div attr="value"></div>
<div attr="xxxvaluexxx"></div>
另一个和正则的共通点
除了上面三个选择器符号和正则表达式很相通外，css 属性选择器还支持另一个很类似的语法 - 搜索标识：
[class^='value' i]
当然仅支持 i、s 标识，通过 i 标识，属性选择器会忽略 value 的大小写进行匹配，所以上面的表达式可以匹配到 value、VALUE 甚至是 vALue。而 s 标识则强制检查大小写，不过目前只有 firefox 支持，而且，这个不是默认的吗，😂，不知道有啥用途。
实战
我们平时用属性选择器都是用来选择一些自定义属性的，其实我们可以直接用它来选择 class 等常见属性。下面我们模拟一个场景，比如你有一个组件库，早期组件库中的字体都是默认的，从页面继承而来，然而经常会由于各个项目的页面样式不一致导致组件库在不同项目中呈现出差异，为了让组件库统一，你想到了以下几个方案：
- 在组件内加上全局样式，修改默认页面字体，让每个项目尽在自己掌控，然而项目维护者升级后很快就来找你麻烦，毕竟你这么一改，他自己的样式可能就挂了。
- 在每个组件内添加上字号定义，这样就总没人找你麻烦了，然而。。。改了半个钟头后你放弃了，实在是太麻烦了，还是就这么苟下去吧。
然而有一天，你看到了这篇文章，想到你的每个组件容器上都被你打上了特别的印记 class='my-component-prefix-cls-(button|card|input|xxx)'，于是，你立刻想到了完美的解决方案：
[class|='my-component-prefix-cls'] {
font-size: 12px;
}
终于你完成了你的伟业，也没有影响到页面上的其它元素，真是可喜可贺，可喜可贺。
上面只是 YY，实际场景由于字体会继承，修改了你的组件字体后，被组件包裹的字体势必会受到影响，不过不妨将其视为突破口。
总结
CSS 属性选择器的“正则”特质在正常情况下很少需要用到，但是在一些特别的场景或是一些调试场景下还是很香的。