#书摘 #css #前端
《CSS 选择器世界》6.3 属性值正则匹配选择器
属性值正则匹配选择器包括下面3种：

[attr^="val"]

[attr$="val"]

[attr*="val"]​​


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

1. [attr^="val"]
[attr^="val"] 表示**匹配attr属性值以字符val开头的元素**。例如：

<!-- 匹配 -->
<div attr="val"></div>

<!-- 不匹配 -->

<div attr="text val"></div>
<!-- 匹配 -->

<div attr="value"></div>

<!-- 匹配 -->

<div attr="val-ue"></div>​​


- 这种选择器可以匹配中文，如果匹配的中文不包含特殊字符（如空格等），则引用中文的引号是可以省略的，例如：

[title^=我] {}​​


- 理论上可以匹配空格，但由于IE浏览器会自动移除属性值首尾的空格，因此会有兼容性问题
例如，下面的样式可以对HTML格式进行验证：

/*高亮类属性值包含多余空格的元素*/

[class^=" "] {
outline: 1px solid red;
}​​



实际开发中，开头正则匹配属性选择器用得比较多的地方是**判断`<a>`元素的链接地址类型**，也可以用来显示对应的小图标，例如：

/* 链接地址 */

[href^="http"],
[href^="ftp"],
[href^="//"] {

background: url(./icon-link.svg) no-repeat left;
}
/* 网页内锚链 */

[href^="#"] {

background: url(./icon-anchor.svg) no-repeat left;

}


/* 手机和邮箱 */


[href^="tel:"] {


background: url(./icon-tel.svg) no-repeat left;


}


[href^="mailto:"] {


background: url(./icon-email.svg) no-repeat left;


}​​



2. [attr$="val"]
[attr$="val"] 表示**匹配attr属性值以字符val结尾的元素**。例如：

<!-- 匹配 -->
<div attr="val"></div>
<!-- 匹配 -->
<div attr="text val"></div>
<!-- 不匹配 -->

<div attr="value"></div>
<!-- 不匹配 -->
<div attr="val-ue"></div>​​



该选择器的使用细节和 [attr^="val"] 的一致，这里不再赘述。
**在实际开发中，结尾正则匹配属性选择器用得比较多的地方是判断`<a>`元素的链接的文件类型**，也可以用来显示对应的小图标。例如：

/* 指向PDF文件 */
[href$=".pdf"] {

background: url(./icon-pdf.svg) no-repeat left;
}

/* 下载zip压缩文件 */

[href$=".zip"] {

background: url(./icon-zip.svg) no-repeat left;
}
/* 图片链接 */
[href$=".png"],
[href$=".gif"],
[href$=".jpg"],
[href$=".jpeg"],
[href$=".webp"] {

background: url(./icon-image.svg) no-repeat left;
}​​



3. [attr*="val"]
[attr*="val"] 表示**匹配attr属性值包含字符val的元素**。例如：

<!-- 匹配 -->
<div attr="val"></div>

<!-- 匹配 -->

<div attr="text val"></div>

<!-- 匹配 -->
<div attr="value"></div>

<!-- 匹配 -->
<div attr="val-ue"></div>​​



它也可以用来匹配链接元素是否是外网地址，例如：

a[href*="//""]:not([href*="example.com"]) {}​​


https://memo.cosine.ren/m/326