css属性选择器^= $= *=实现精确匹配

使用=实现精确匹配，如[title=”example”]；^=、$=、*=分别匹配开头、结尾和包含的子串，用于模式匹配，需根据需求选择以避免误选。

在CSS中，属性选择器允许我们根据元素的属性及属性值来选择元素。常见的子串匹配属性选择器有 ^=、$= 和 *=，它们分别用于前缀、后缀和包含匹配。但这些并不是精确匹配，如果你想实现精确匹配，需要使用标准的属性选择器语法。

精确匹配：使用标准属性选择器

要实现属性值的完全相等匹配，直接使用等号 = 即可：

/* 选择 title 属性值 exactly 等于 "example" 的元素 */
[title="example"] {
color: red;
}

这个选择器只会匹配 title 属性精确等于 “example” 的元素，不会匹配 “example1” 或 “my-example” 等。

^=：匹配属性值开头（前缀）

^= 选择器用于选择属性值以指定字符串开头的元素：

立即学习“前端免费学习笔记（深入）”；

/* 匹配 href 以 "https://" 开头的链接 */
[href^="https://"] {
color: green;
}

例如，https://example.com 会被匹配，但 http://example.com 不会。

$=：匹配属性值结尾（后缀）

$= 选择属性值以指定字符串结尾的元素：

ChatYoutube

Youtube视频总结器，一键分析以及对话

97

查看详情

/* 匹配 src 以 ".png" 结尾的图片 */
[src$=".png"] {
border: 1px solid blue;
}

这会选中所有 PNG 图片，如 logo.png，但不会选中 icon.jpg。

*=：匹配属性值包含指定字符串

*= 选择属性值中包含某个子串的元素：

/* 匹配 class 属性中包含 "btn" 的元素 */
[class*="btn"] {
padding: 10px;
}

像 class=”button”、class=”my-btn-close” 都会被匹配。

如何避免模糊匹配？使用精确等于

如果你希望避免 ^=、$=、*= 带来的模糊匹配，一定要用 = 实现精确控制：

/* 只匹配 data-type 精确等于 "user" 的元素 */
[data-type="user"] {
background: #eee;
}

这样就不会误中 data-type=”admin” 或 data-type=”superuser”。

基本上就这些。记住：= 是精确匹配，其他是模式匹配。根据需求选择合适的方式即可。不复杂但容易忽略细节。