属性值正则匹配选择器包括以下三种：[attr^="val"][attr$="val"][attr*="val"]这三个属性选择器是字符匹配，而不是单词匹配。其中，尖角符号^、美元符号$和星号*是正则表达式中的特殊标识符，分别代表前匹配、后匹配和任意匹配。使用这些选择器，纯CSS可以制作很酷的功能。显示超链接的小图标和文件类型图表使用[attr^="val"]前匹配选择器确定元素的链接地址类型，显示相应的小图标。显示超链接的小图标样式如下：[href]{padding-left:18px;}/*链接地址*/[href^="https"],[href^="//"]{background:url("./images/link.png")左边不重复;}/*网页中的锚链接*/[href^="#"]{background:url("./images/anchor.png")no-repeatleft;}/*phoneandemail*/[href^="tel:"]{background:url("./images/tel.png")no-repeatleft;}[href^="mailto:"]{background:url("./images/e-mail.png")no-repeatleft;}效果并使用[attr$="val"]匹配选择器显示文件的小图标类型。CSS如下：/*指向PDF文件*/[href$=".pdf"]{background:url("./images/pdf.png")no-repeatleft;}/*下载zipfile*/[href$=".zip"]{background:url("./images/zip.png")不重复；}/*图片链接*/[href$=".png"],[href$=".gif"],[href$=".jpg"],[href$=".jpeg"],[href$=".webp"]{背景：url("./images/image.png")no-repeatleft;}效果如下CSS属性选择器搜索过滤技术我们可以使用属性选择器来辅助我们实现搜索过滤效果，比如通讯录，城市列表，性能高，代码少。HTML结构如下：
这个时候，当我们在输入框输入内容的时候，你只需要根据输入内容动态创建一段CSS代码即可实现搜索匹配效果，无需自己编写代码进行匹配验证。vareleStyle=document.createElement('style');document.head.appendChild(eleStyle);//文本输入框input.addEventListener('input',function(){varvalue=this.value.trim();eleStyle.innerHTML=value?'[data-search]:not([data-search*="'+value+'"]){display:none;}':'';});最终效果如下更多tips【Tips】package.json中homepage属性的作用【Tips】使用Vue.jsMixins复用你的代码禁止H5页面手机弹出虚拟键盘？【Tips】CSS是如何实现文本对齐的？关注公众号第一时间收到最新文章。如果对你有一点帮助，可以点赞、点赞、收藏，也可以小额打赏作者，鼓励作者写出更多更好的文章。
