属性选择器分四类：存在匹配（[attr]）、精确值匹配（[attr="val"]）、子串/位置匹配（~、*、^、$）和忽略大小写匹配（[attr="val" i]），各适用于不同场景且性能差异显著。
属性存在就匹配：[attr]
只要元素带有这个属性，不管值是什么都命中。比如 [disabled] 会选中 <button disabled> 和 <input disabled="false">，甚至 <div disabled="anything">。
常见误用是以为它只匹配布尔属性的“启用”状态，其实不是——只要 HTML 里写了这个属性名，就满足条件。
- 适合做“有无标记”类控制，比如统一禁用所有带
data-legacy的组件样式 - 注意大小写敏感：
[class]和[CLASS]在 HTML 中等价（HTML 属性名不区分大小写），但在 XML 或 XHTML 模式下可能不等价 - 不能用于判断属性是否为空字符串，
<input value="">仍会被[value]匹配到
精确值匹配：[attr="value"]
要求属性值完全等于指定字符串，字符、大小写、空格都要一致。比如 [type="submit"] 不会匹配 <button type=" Submit ">（首尾空格）或 <button type="Submit">（大小写）。
典型场景是表单控件类型区分或自定义数据分类：
立即学习“前端免费学习笔记（深入）”；
[data-role="header"] { font-size: 1.5em; }
[aria-hidden="true"] { display: none; }- 值中含引号、反斜杠等特殊字符时，必须用反斜杠转义，或改用单/双引号包裹整个选择器（CSS 层面支持）
- IE8+ 支持，但 IE7 只支持 ASCII 字符，非 ASCII 值可能失效
- 对动态生成的属性值要小心：JS 设置
el.setAttribute('data-id', 123)后，[data-id="123"]可以匹配；但设为数字123再读取el.dataset.id是字符串，本质一致
按单词或子串匹配：[attr~="val"]、[attr*="val"]、[attr^="val"]、[attr$="val"]
这些是进阶匹配方式，用途差异明显，容易混用：
-
[attr~="val"]：匹配以空格分隔的独立单词，类似 class 列表。例如[class~="btn"]能命中class="btn primary"，但不匹配class="btn-primary" -
[attr*="val"]：子串包含，最宽松。如[href*="example"]匹配https://example.com和https://sub.example.org -
[attr^="val"]：必须开头，常用于协议或路径前缀，如[src^="data:"]筛 base64 图片，[href^="/"]匹配站内绝对路径 -
[attr$="val"]：必须结尾，适合扩展名或参数，如[src$=".png"]、[href$="?t=1"]（注意 URL 参数不稳定，慎用于生产逻辑）
性能上，^= 和 $= 在浏览器中通常比 *= 快，因为可利用前缀/后缀索引；但所有属性选择器都比 class 或 tag 选择器慢，高频渲染区域慎用。
忽略大小写的匹配：[attr="val" i]
在属性值后加 i（不分大小写标识符），让匹配忽略大小写。这是 CSS Level 4 新增特性，Chrome 63+、Firefox 61+、Safari 15.4+ 支持，Edge 16+ 也支持。
例如：[lang="en" i] 同时匹配 lang="EN"、lang="en-us"（注意：只影响整个值的大小写，不等价于正则的 /en/i）。
- 不能写成
[lang~="en" i]，i只支持跟在=、~=、|=后面，不支持*=、^=、$= - 服务器返回的 HTML 若声明了
lang="zh-CN"，而 JS 动态写入element.lang = "zh-cn"，用[lang="zh-cn" i]就能统一对待 - 没兼容需求时优先用
i，比写两套规则（[lang="en"], [lang="EN"]）更干净
实际写的时候，属性选择器的语义不如 class 明确，调试时也不如 class 容易 trace。如果只是为样式隔离，优先用 class；只有当属性本身承载业务含义（如 data-status、aria-* 、type）且无法改写 HTML 结构时，才值得投入精力设计属性匹配逻辑。
