如何使用CSS屬性值正則匹配選擇器

這篇文章給大家分享的是有關如何使用CSS屬性值正則匹配選擇器的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

• [attr^="val"]

• [attr$="val"]

• [attr*="val"]

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

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

顯示超鏈接的小圖標和文件類型圖表

利用[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; } ' : '';
});

感謝各位的閱讀！關于“如何使用CSS屬性值正則匹配選擇器”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！