专栏首页前端全栈开发者巧用CSS属性值正则匹配选择器

巧用CSS属性值正则匹配选择器

属性值正则匹配选择器包括下面3种:

  • [attr^=”val”]
  • [attr$=”val”]
  • [attr*=”val”]

这3种属性选择器是字符匹配,而非单词匹配。其中,尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符,分别表示前匹配、后匹配和任意匹配。

利用这些选择器,纯CSS就可以做出很炫酷的功能。

显示超链接的小图标和文件类型图表

利用[attr^="val"]前匹配选择器可以判断<a>元素的链接地址类型,以用来显示对应的小图标。显示超链接的小图标的样式如下:

[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结构如下:

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

此时,当我们在输入框种输入内容的时候,只要根据输入内容动态创建一段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; } ' : '';
});

最终效果如下


首发于博客:https://blog.zhangbing.site/2020/03/09/Using-CSS-property-values-to-match-selectors/

如果对你有一点点帮助,可以点个关注。

作者简介:做工程不做码农(微信公众号同名),Web前端工程师,坐标杭州,聚焦大前端技术的公众号,分享我的原创或精选文章,欢迎关注。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • GitHub.com上的那些东西你都知道什么意思吗?

    在GitHub中,很多页面都可以使用键盘快捷键。在各个页面按下“shift + /”都可以打开键盘快捷键一览表,如下图:

    Dunizb
  • 【译】Web中的图像技术总结,前端开发中各种图片引入的优点缺点及实例

    前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是HTML <img>,也可以是通过CSS背景生成的图片,也可以是SVG <image>。选...

    Dunizb
  • 3个非常有用的Node.js软件包

    Node.js已成为IT不可或缺的一部分。有了自己的软件包管理器NPM,Node可以发现许多非常有用的库和框架。

    Dunizb
  • 符合标准的有序列表分页源码示例

    一个符合标准的有序列表分页源码示例。 你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。 DOM结构: <ul class="paginatio...

    练小习
  • 制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿

        前几日在利用JQuery做菜单滑动标记这个效果的时候,最后发现滑动条在我用鼠标快速滑动的时候,会出现滑动条延迟滑动,并且有卡顿的现象,相当影响体验感受。...

    八哥
  • 点击a页面链接跳转b页面某个tab切换的实现

    解释一下,首先有一行 .tab 是 tab按钮, .inner 是对应的三个 li 默认隐藏,第几个 tab 选中就对应的显示第几个 li 。 

    德顺
  • jquery导航栏点击及页面跳转后对应栏目添加选中效果

    但是一般页面的导航栏都是需要跳转页面的,上面的方法只在当前页面有效,跳转后就失效了。

    德顺
  • 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门

    将元素高度设置为0, 使用内边距将盒子撑开,给盒子使用overflow:hidden; 将文字隐藏。

    Daotin
  • Canvas多列表文字的显示 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 技术面试要了解的算法和数据结构知识

    目录 在线练习 在线编程面试 数据结构 算法 贪心算法 位运算 复杂度分析 视频教程 面试宝典 计算机科学资讯 文件结构 在线练习 Le...

    Albert陈凯

扫码关注云+社区

领取腾讯云代金券