CSS 選擇器,模糊查找匹配元素

圖片出自:needpix.com

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.

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料