CSS中通配输入文字的小技巧——如何在元素名中包含通配符

所属分类：Web前端

摘要

CSS中，*的作用是通配表示“全部”。遗憾的是，并没有一种通配元素名的方法。

例如，我有好几个东西class都标记为了my-element-序号，就像这样：

<p class="my-element-1"></p> <p class="my-element-2"></p> <p class="my-element-3"></p> ...

我现在希望让所有这些class的东西都应用同一个css规则。可惜，css并不支持这么一种写法：

.my-element-* {  }

那怎么办呢？实际上，css针对元素名等名字也可以实现通配，技巧是这么写：

[class^="my-element-"] {  }

就是这样。
“^=”的意思是：“以等号后面内容开头的所有”。那么这样写，规则就可以生效到所有以"my-element-"开头的class。
同理还有两种：
“$=”：以等号后面内容结束的所有
“*=”：包含等号后面内容的所有

就此，我们在css中希望通配应用到好几个元素上，就可以用这种方式实现了。

这种写法应用的是Attribute Selector。可参考mozilla的文档：
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

开发者们一般建议，应用这种方式时，html里不写做class，而是自己起一个data-tagname。就像这样：

<p data-tagname="my-element-1"></p> <p data-tagname="my-element-2"></p> <p data-tagname="my-element-3"></p> ...

[data-tagname^="my-element-"] {  }

这样可以实现更好的容错。
就是这样。