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

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

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

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

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

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

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

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

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

[href] {padding-left: 18px;}
/* 鏈接地址 */
[href^="https"],
[href^="//"] {
    background: url("./images/link.png") no-repeat left;
}
/* 網(wǎng)頁(yè)內(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)顯示文件類(lèi)型小圖標(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屬性選擇器搜索過(guò)濾技術(shù)

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

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

<input type="search" id="input" placeholder="輸入城市名稱(chēng)或拼音" />
<ul>
    <li data-search="重慶市 chongqing">重慶市</li>
    <li data-search="哈爾濱市 haerbin">哈爾濱市</li>
    <li data-search="長(zhǎng)春市 changchun">長(zhǎng)春市</li>
    <li data-search="長(zhǎng)沙市 changsha">長(zhǎng)沙市</li>
    <li data-search="上海市 shanghai">上海市</li>
    <li data-search="杭州市 hangzhou">杭州市</li>
</ul>

此時(shí)，當(dāng)我們?cè)谳斎肟蚍N輸入內(nèi)容的時(shí)候，只要根據(jù)輸入內(nèi)容動(dòng)態(tài)創(chuàng)建一段CSS代碼就可以實(shí)現(xiàn)搜索匹配效果了，無(wú)需自己寫(xiě)代碼進(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！