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

[attr^="val"]

[attr$="val"]

[attr*="val"]

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

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

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

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

[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結構如下：

• 重慶市
• 哈爾濱市
• 長春市
• 長沙市
• 上海市
• 杭州市

此時，當我們在輸入框種輸入內容的時候，只要根據輸入內容動態創建一段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屬性值正則匹配選擇器(小技巧)的文章就介紹到這了,更多相關CSS屬性值正則匹配內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。