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-"] {
}
这样可以实现更好的容错。
就是这样。
参考资料:https://stackoverflow.com/questions/30445913/css-wildcard-element-name-selection