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

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

热门相关:地球第一剑   夫人你马甲又掉了   法医娇宠,扑倒傲娇王爷   重生之至尊千金   修仙界最后的单纯