CSS中，*的作用是通配表示“全部”，遺憾的是，并沒有一種通配元素名的方法，
例如，我有好幾個東西class都標記為了my-element-序號，就像這樣：
<p ></p>
<p ></p>
<p ></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.uj5u.com/qiye/553451.html
標籤：Html/Css
上一篇：記錄--超長溢位頭部省略打點，坑這么大，技巧這么多？
下一篇：返回列表