当前位置：首页 > 文章列表 > 文章 > 前端 > CSS属性选择器 ^=、$= 和 = 的区别如下：^=（匹配开头）用于选择属性值以指定字符串开头的元素。示例：[href^="https"] 匹配所有 href 属性以 "https" 开头的链接。$=（匹配结尾）用于选择属性值以指定字符串结尾的元素。示例：[href$=".pdf"] 匹配所有 href 属性以 ".pdf" 结尾的链接。=（精确匹配）用于选择属性值完全等于指定字符串的

CSS属性选择器 ^=、$= 和 = 的区别如下：^=（匹配开头）用于选择属性值以指定字符串开头的元素。示例：[href^="https"] 匹配所有 href 属性以 "https" 开头的链接。$=（匹配结尾）用于选择属性值以指定字符串结尾的元素。示例：[href$=".pdf"] 匹配所有 href 属性以 ".pdf" 结尾的链接。=（精确匹配）用于选择属性值完全等于指定字符串的

2026-05-21 20:18:29 0浏览收藏

CSS属性选择器中的^=、$=和=看似相似，实则职责分明：^=精准锁定属性值“开头”的字符串，$=严格匹配“结尾”部分，而=要求属性值“完全相等”——三者均区分大小写、仅做字面匹配，不支持正则、不分词、不忽略空格；常被误用的“包含”需求其实应由*=承担，但其宽松特性易导致意外匹配，因此在实际开发中优先选用更精确的^=或$=，并根据语义正确选择~=（空格分隔单词匹配）或|=（连字符语言匹配）等替代方案，才能写出健壮、可维护的CSS选择器。

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

css属性选择器`^=`匹配开头字符串

当需要选中某个属性值以特定字符串**开头**的元素时用^=。它做的是前缀匹配，且区分大小写。

常见错误是误以为它支持正则或通配符，其实只认字面开头；另外容易忽略空格问题——data-role^="btn"不会匹配data-role=" btn-primary"（前面有空格）。

[href^="https://"] 匹配所有 HTTPS 链接
[class^="icon-"] 匹配 class="icon-home"，但不匹配 class="fa-icon-home"
不支持多值属性的单个词匹配，如[class^="btn"]无法匹配class="text-btn primary"中的btn

css属性选择器`$=`匹配结尾字符串

$=用于匹配属性值以指定字符串**结尾**的情况，同样区分大小写、纯字面匹配。

典型误用是拿它处理文件扩展名时没考虑大小写：比如[src$=".jpg"]会漏掉.JPG或.Jpg；还有人想用它匹配 class 中某个后缀，但 class 是空格分隔的多值，$=对整个属性值生效，不是对每个 token。

[src$=".png"] 匹配 src="chart.png"，不匹配 src="chart.png?v=1"
[type$="mail"] 可匹配 type="email"，但不能用于 type="text/email"（因为不是以mail结尾）
注意 URL 参数干扰：带查询参数的路径需写全，如[href$=".pdf?inline=true"]

css属性选择器`=`是全等匹配，不是包含匹配

=表示属性值**完全等于**指定字符串，一字不差，包括大小写、空格和顺序。它不是“包含”，也不是“模糊匹配”。

很多人把=当成类似 JavaScript 的includes()，结果发现[class="btn"]选不出class="btn primary"——因为整个class属性值是"btn primary"，不等于"btn"。

[lang="en"] 只匹配 lang="en"，不匹配 lang="en-US"
[data-id="123"] 不会匹配 data-id=" 123 "（首尾空格不同）
若要匹配多值中的某一个，该用~=（空格分隔匹配），例如[class~="btn"]

真正匹配“包含子串”的是`*=`，不是`=`

标题里说的“包含内容”实际对应的是*=，不是=。这是最容易混淆的一点：三个符号各司其职，=最严格，*=最宽松。

*=做子串搜索，但仍是字面匹配，不分词也不识别边界。比如[class*="btn"]会匹配class="subtle-btn"甚至class="button-group"（因为包含"but"？不对，是"btn"——等等，这里得小心：它匹配的是连续字符，不是单词）。

[href*="example"] 匹配 href="https://example.com" 和 href="/api/example-data"
[class*="col"] 会意外命中 class="collapse"，这不是 bug，是预期行为
性能上，*=比^=和$=略慢，尤其在大量节点时，浏览器需逐字符扫描

实际项目中，优先用^=和$=而非*=，能减少误匹配；而=看似简单，却因严格性常被绕开——这时候该想清楚：你真需要全等，还是该用~=或|=？

本篇关于《CSS属性选择器 ^=、$= 和 = 的区别如下：^=（匹配开头）用于选择属性值以指定字符串开头的元素。示例：[href^="https"] 匹配所有 href 属性以 "https" 开头的链接。$=（匹配结尾）用于选择属性值以指定字符串结尾的元素。示例：[href$=".pdf"] 匹配所有 href 属性以 ".pdf" 结尾的链接。=（精确匹配）用于选择属性值完全等于指定字符串的元素。示例：[id="main"] 匹配所有 id 属性为 "main" 的元素。总结^=：属性值以...开头 $=：属性值以...结尾 =：属性值完全等于...》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！