巧用CSS特性值正则表达式配对挑选器(小窍门)

日期:2021-02-27 类型:科技新闻 

关键词:微擎小程序开发,微信小程序下载,如何在微信上做小程序,调查问卷微信小程序,微信抽签小程序

特性值正则表达式配对挑选器包含下面3种:

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

这3种特性挑选器是标识符配对,而非单词配对。在其中,尖角标记^、美元标记$和星号*全是正则表达式表述式中的独特标志符,各自表明前配对、后配对和随意配对。

运用这些挑选器,纯CSS便可以做出很酷炫的作用。
<!-- more -->

显示信息超连接的小标志和文档种类图表

运用[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>

此时,当大家在键入框种键入內容的情况下,要是依据键入內容动态性建立1段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特性值正则表达式配对內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!