最直接的精确匹配方式是[attr="value"]，要求属性值完全一致（区分大小写、无空格或多余字符）；[attr~="value"]用于空格分隔的单词匹配；[attr*="value"]和[attr^="value"]属于模糊匹配，非精确。
用 [attr="value"] 匹配属性值完全相等的元素
这是最直接的精确匹配方式，要求元素的指定属性值与字符串完全一致（区分大小写、不可有空格或多余字符）。比如 <button type="submit"></button> 可被 [type="submit"] 选中，但 <button type=" submit "></button> 或 <button type="Submit"></button> 都不会命中。
常见误用点：
- 忽略 HTML 属性值的默认大小写行为（
type、role等是大小写敏感的；class值本身不敏感，但 CSS 选择器仍按字面匹配） - 把带空格的 class 当作单个值：例如
<div class="btn primary">，<code>[class="btn primary"]能匹配，但实际开发中更推荐用.btn.primary - 在自定义属性上未加引号导致解析失败：HTML 中
data-status=active合法，但 CSS 里必须写成[data-status="active"]，漏引号会直接无效 - 这个波浪号不是正则，也不支持前缀/后缀匹配，只认完整单词
- 不能用于
type="email"这类单值属性——即使写成[type~="email"]语法合法，但因type不是空格分隔型，实际等价于[type="email"] - 对中文或含连字符的值也按空白切分，
[data-tags~="vue-js"]只能匹配data-tags="react vue-js svelte"，不匹配data-tags="vue-jsx" -
[href*="login"]会同时匹配/login、/login-form、/prelogin，甚至/my-login-page -
[class^="btn-"]能选中class="btn-primary"，但也会选中class="btn-secondary disabled"——只要开头是btn-就行 - 真正需要“精确”的场景，应优先考虑
=或~=，而不是靠*=硬凑 -
[attr="value"]和[attr~="value"]自 IE7 起就支持，基本无风险 -
[attr*="value"]、[attr^="value"]、[attr$="value"]在 IE7–IE8 中不支持，若需兼容旧环境得回避 - 所有属性选择器对属性值中的转义字符（如引号、反斜杠）处理较严格，建议统一用双引号包裹值，并避免在 HTML 中手动写转义
[attr~="value"] 用于空格分隔的单词匹配
适用于 class、rel、aria-role 这类允许空格分隔多个值的属性。它把属性值按空白符切开，只要其中某个“词”等于 "value" 就匹配。
例如：<a rel="noopener noreferrer"></a> 可被 [rel~="noreferrer"] 选中；<span class="text-sm font-bold"></span> 可被 [class~="font-bold"] 选中。
立即学习“前端免费学习笔记（深入）”；
注意：
[attr*="value"] 和 [attr^="value"] 是子串/前缀匹配，不是精确匹配
标题里说“包含特定值”，容易让人混淆——*= 和 ^= 属于模糊匹配，和“精确”无关。它们常被误当作精确手段使用，结果引入意外匹配。
比如：
复合条件与浏览器兼容性要点
多个属性选择器可连写，如 [type="checkbox"][disabled] 表示同时满足两个条件；也可嵌套伪类，如 [data-active="true"]:hover。
兼容性方面：
真正难的不是写法，而是判断该用 = 还是 ~=：前者要一模一样，后者要“是其中一个词”。多数时候你心里想的是后者，却下意识写了前者。
