【小技巧】巧用CSS屬性值正則匹配選擇器

屬性值正則匹配選擇器包括下面3種：

• [attr^="val"]
• [attr$="val"]
• [attr*="val"]

這3種屬性選擇器是字元匹配，而非單詞匹配。其中，尖角符號^、美元符號$以及星號*都是正規表示式中的特殊識別符號，分別表示前匹配、後匹配和任意匹配。

利用這些選擇器，純CSS就可以做出很炫酷的功能。

顯示超連結的小圖示和檔案型別圖表

利用[attr^="val"]前匹配選擇器可以判斷<a>元素的連結地址型別，以用來顯示對應的小圖示。顯示超連結的小圖示的樣式如下：

[href] {padding-left: 18px;}
/* 連結地址 */
[href^="https"],
[href^="//"] {
    background: url("./images/link.png") no-repeat left;
}
/* 網頁內錨鏈 */
[href^="#"] {
    background: url("./images/anchor.png") no-repeat left;
}
/* 手機和郵箱 */
[href^="tel:"] {
    background: url("./images/tel.png") no-repeat left;
}
[href^="mailto:"] {
    background: url("./images/e-mail.png") no-repeat left;
}
複製程式碼

效果

而利用[attr$="val"]後匹配選擇器則可以實現顯示檔案型別小圖示。CSS如下：

/* 指向PDF檔案 */
[href$=".pdf"] {
    background: url("./images/pdf.png") no-repeat left;
}
/* 下載zip壓縮檔案 */
[href$=".zip"] {
    background: url("./images/zip.png") no-repeat left;
}
/* 圖片連結 */
[href$=".png"],
[href$=".gif"],
[href$=".jpg"],
[href$=".jpeg"],
[href$=".webp"] {
    background: url("./images/image.png") no-repeat left;
}
複製程式碼

效果如下

CSS屬性選擇器搜尋過濾技術

我們可以藉助屬性選擇器來輔助我們實現搜尋過濾效果，如通訊錄、城市列表，這樣做效能高，程式碼少。

HTML結構如下：

<input type="search" id="input" placeholder="輸入城市名稱或拼音" />
<ul>
    <li data-search="重慶市 chongqing">重慶市</li>
    <li data-search="哈爾濱市 haerbin">哈爾濱市</li>
    <li data-search="長春市 changchun">長春市</li>
    <li data-search="長沙市 changsha">長沙市</li>
    <li data-search="上海市 shanghai">上海市</li>
    <li data-search="杭州市 hangzhou">杭州市</li>
</ul>
複製程式碼

此時，當我們在輸入框種輸入內容的時候，只要根據輸入內容動態建立一段CSS程式碼就可以實現搜尋匹配效果了，無需自己寫程式碼進行匹配驗證。

var eleStyle = document.createElement('style');
document.head.appendChild(eleStyle);
// 文字輸入框
input.addEventListener('input', function() {
    var value = this.value.trim();
    eleStyle.innerHTML = value ? '[data-search]:not([data-search*="' + value +'"]) { display: none; } ' : '';
});
複製程式碼

最終效果如下

---

關注公眾號，第一時間接收最新文章。如果對你有一點點幫助，可以點喜歡點贊點收藏，還可以小額打賞作者，以鼓勵作者寫出更多更好的文章。