CSS選擇器中沒有所謂的「萬用字元(*)」,可以透過一些方式接近模糊查詢方式,查找匹配屬性或值的元素
歸納出幾種用法
下表屬性名稱不一定為Class,可以替換成需要的屬性
單引號可有可無
[class] | 比對元素包含指定屬性 |
[id][class][href] | 比對元素包含其中一個屬性 |
[class=’test’] | 完全比對元素屬性與值 (區分大小寫) |
[class^=’test’] | 比對元素屬性開頭為指定的值 |
[class$=’test’] | 比對元素屬性結尾為指定的值 |
[class*=’test’] | 模糊比對屬性包含指定的值 |
使用範例:
<ul>
<li class="test_a">aaa</li>
<li class="test_b">bbb</li>
<li class="test_c">ccc</li>
<li class="test_d" id="test_d">ccc</li>
<li class="test_e" id="test_e">ccc</li>
<li>ddd</li>
</ul>
<style>
[class^='test_'] {
color: blue
}
li[class$='_b'] {
color: yellow
}
[class*='st_'][class$='_c'] {
color: red
}
ul li[class][id] {
color: green
}
[class][id]:not([id='test_d']){
color: rebeccapurple
}
</style>
See the Pen CSS 選擇器,模糊查找匹配元素 by VECTOR.cool (@ann71727) on CodePen.