当前位置：首页 > 文章列表 > 文章 > 前端 > 属性选择器^=、$=和=在CSS中用于根据元素的属性值进行匹配，它们的区别如下：1.[attr=value]（等于）作用：选择具有指定属性且属性值完全等于给定值的元素。示例：a[href="https://example.com"]{color:red;}只有href属性完全等于"https://example.com"的<a>标签会被选中。2.[attr^=value]（以...开头

属性选择器^=、$=和=在CSS中用于根据元素的属性值进行匹配，它们的区别如下：1.[attr=value]（等于）作用：选择具有指定属性且属性值完全等于给定值的元素。示例：a[href="https://example.com"]{color:red;}只有href属性完全等于"https://example.com"的<a>标签会被选中。2.[attr^=value]（以...开头

2026-01-30 12:31:40 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《属性选择器^=、$=、=的区别是什么？》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

属性选择器[attr^="value"]匹配属性值严格以指定字符串开头（区分大小写、不可有前置空格）；[attr$="value"]匹配严格以指定字符串结尾；[attr="value"]表示完全相等（含空格大小写），非包含匹配；子字符串匹配应使用[attr*="value"]。

属性选择器^=、$=、=区别是什么_匹配开头、结尾和包含内容

属性选择器 `[attr^="value"]` 匹配开头

这个选择器检查元素的 attr 属性值是否**严格以指定字符串开头**，区分大小写，且必须是完整属性值的起始位置。

常见误用：以为能匹配单词边界或子字符串，比如 [class^="btn"] 会选中 class="btn-primary"，但不会选中 class="my-btn"（因为不是“以 btn 开头”，而是以 my- 开头）。

实操建议：

适合用于统一前缀的自定义属性，如 data-api-url^="https://api.example.com"
注意空格影响：如果属性值有前置空格（如 class=" btn-primary"），^= 就不匹配 —— HTML 解析后空格属于值的一部分
不能省略引号，[attr^=value] 在某些浏览器中可能解析失败，始终写成 [attr^="value"]

属性选择器 `[attr$="value"]` 匹配结尾

它要求属性值**严格以指定字符串结尾**，同样区分大小写、不忽略首尾空格，且必须是整个属性值的末尾。

典型场景：筛选特定后缀的资源链接或文件类型：

a[href$=".pdf"] 可匹配 href="report.pdf"，但不匹配 href="report.pdf?ver=1"
[src$="/logo.png"] 要求路径最后一段**正好是 logo.png**，不能带查询参数或 hash
对 class 属性慎用：因为 class="icon icon--large" 的属性值结尾是 --large，不是 large；若想匹配含 large 的 class，该用 *= 或 JS 处理

属性选择器 `[attr="value"]` 是完全相等，不是包含

标题里说的 “= 匹配包含内容” 是常见误解。[attr="value"] **只匹配属性值与字符串完全一致的情况**（包括空格、大小写、顺序），和 JavaScript 的 === 类似。

例如：

[type="submit"] 匹配
[class="btn"] 不会匹配 class="btn primary"，哪怕它“包含 btn” —— 因为整个值是 "btn primary"，不等于 "btn"
若真要匹配“包含某个单词”的 class，应使用 [class~="btn"]（波浪号表示空格分隔的单词匹配）

别把 `*=` 和 `=` 搞混了

真正做“包含子字符串”匹配的是 [attr*="value"]，不是 =。这是最容易踩的坑。

对比示例：

[title*="error"] → 匹配 title="Network error occurred" ✔️
[title="error"] → 只匹配 title="error"，其他都不行 ❌
[title~="error"] → 匹配 title="system error warning"（空格分隔）✔️，但不匹配 title="error-code" ❌

性能上，*= 和 ^=/$= 都比 = 慢，尤其在深层 DOM 中大量使用时；若只需精确匹配，优先用 =。

浏览器兼容性不是问题 —— 这些选择器在 IE7+ 就已支持，但注意：CSS 层叠顺序仍受特异性规则约束，[attr="v"] 和 .cls 特异性相同，谁在后面谁生效。

以上就是《属性选择器^=、$=和=在CSS中用于根据元素的属性值进行匹配，它们的区别如下：1.[attr=value]（等于）作用：选择具有指定属性且属性值完全等于给定值的元素。示例：a[href="https://example.com"]{color:red;}只有href属性完全等于"https://example.com"的标签会被选中。2.[attr^=value]（以...开头）作用：选择具有指定属性且属性值以指定值开头的元素。示例：a[href^="https"]{color:blue;}所有href属性以"https"开头的标签都会被选中，如"https://example.com"或"https://www.example.com"。3.[attr$=value]（以...结尾）作用：选择具有指定属性且属性值以指定值结尾的元素。示例：a[href$=".pdf"]{color:green》的详细内容，更多关于的资料请关注golang学习网公众号！