CSS中，*的作用是通配表示“全部”。遺憾的是，並沒有一種通配元素名的方法。 例如，我有好幾個東西class都標記為了my-element-序號，就像這樣： ```html ... ``` 我現在希望讓所有這些class的東西都應用同一個css規則。可惜，css並不支持這麼一種寫法： ```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
