【小技巧】巧用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; } ' : '';
});
複製代碼

最終效果以下

---

關注公衆號，第一時間接收最新文章。若是對你有一點點幫助，能夠點喜歡點贊點收藏，還能夠小額打賞做者，以鼓勵做者寫出更多更好的文章。