^=匹配属性值开头字符串，区分大小写且纯字面匹配；$=匹配结尾字符串，同样区分大小写；=要求属性值完全相等；*=进行子串搜索，最宽松但易误匹配。
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，是预期行为 - 性能上，
*=比^=和$=略慢，尤其在大量节点时，浏览器需逐字符扫描
^=和$=而非*=，能减少误匹配；而=看似简单，却因严格性常被绕开——这时候该想清楚：你真需要全等，还是该用~=或|=？ 
