您现在的位置是：网站首页> 编程资料编程资料

巧用CSS属性值正则匹配选择器(小技巧)css3的focus-within选择器的使用CSS选择器中的正则表达式使用css选择器四大类：基本、组合、属性、伪类css复杂选择器及css字体样式、颜色属性详解详解如何使用CSS3中的结构伪类选择器和伪元素选择器CSS3 新增选择器的实例css3 伪类选择器快速复习小结CSS 样式的使用方式、选择器盘点CSS Selectors Level4中新增的选择器CSS 中的六个重要选择器(三秒就可以记住)

2023-10-18 242人已围观

简介这篇文章主要介绍了巧用CSS属性值正则匹配选择器,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

属性值正则匹配选择器包括下面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动画实现一个表格滚动轮播效果CSS3制作轮播图的一种方法css实现带箭头和圆点的轮播纯HTML和CSS实现JD轮播图效果利用 CSS3 实现的无缝轮播功能代码HTML+CSS+JS实现堆叠轮播效果的示例代码

下一篇：CSS选择器中的正则表达式使用CSS3选择器新增问题的实现CSS 选择所有子元素添加样式的方法CSS3 新增选择器的实例一文教你玩转CSS 组合选择器

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢