巧用CSS屬性值正則匹配選擇器(小技巧)

發(fā)布時(shí)間：2020-03-11 16:07:13 作者：七年就是一輩子

這篇文章主要介紹了巧用CSS屬性值正則匹配選擇器,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

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

顯示超鏈接的小圖標(biāo)和文件類型圖表

利用[attr^="val"]前匹配選擇器可以判斷<a>元素的鏈接地址類型，以用來顯示對應(yīng)的小圖標(biāo)。顯示超鏈接的小圖標(biāo)的樣式如下：

[href] {padding-left: 18px;}
/* 鏈接地址 */
[href^="https"],
[href^="//"] {
    background: url("./images/link.png") no-repeat left;
}
/* 網(wǎng)頁內(nèi)錨鏈 */
[href^="#"] {
    background: url("./images/anchor.png") no-repeat left;
}
/* 手機(jī)和郵箱 */
[href^="tel:"] {
    background: url("./images/tel.png") no-repeat left;
}
[href^="mailto:"] {
    background: url("./images/e-mail.png") no-repeat left;
}

效果

而利用[attr$="val"]后匹配選擇器則可以實(shí)現(xiàn)顯示文件類型小圖標(biāo)。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屬性選擇器搜索過濾技術(shù)

我們可以借助屬性選擇器來輔助我們實(shí)現(xiàn)搜索過濾效果，如通訊錄、城市列表，這樣做性能高，代碼少。

HTML結(jié)構(gòu)如下：

<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>

此時(shí)，當(dāng)我們在輸入框種輸入內(nèi)容的時(shí)候，只要根據(jù)輸入內(nèi)容動(dòng)態(tài)創(chuàng)建一段CSS代碼就可以實(shí)現(xiàn)搜索匹配效果了，無需自己寫代碼進(jìn)行匹配驗(yàn)證。

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

到此這篇關(guān)于巧用CSS屬性值正則匹配選擇器(小技巧)的文章就介紹到這了,更多相關(guān)CSS屬性值正則匹配內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！