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

这篇具有很好参考价值的文章主要介绍了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文章来源地址https://www.toymoban.com/news/detail-459250.html

到了这里，关于CSS中通配输入文字的小技巧——如何在元素名中包含通配符的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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