css 属性选择器怎么用_属性匹配规则说明

常见误用是以为它只匹配布尔属性的“启用”状态，其实不是——只要 HTML 里写了这个属性名，就满足条件。

• 适合做“有无标记”类控制，比如统一禁用所有带 data-legacy 的组件样式
• 注意大小写敏感：[class] 和 [CLASS] 在 HTML 中等价（HTML 属性名不区分大小写），但在 XML 或 XHTML 模式下可能不等价
• 不能用于判断属性是否为空字符串， 仍会被 [value] 匹配到

精确值匹配：[attr="value"]

要求属性值完全等于指定字符串，字符、大小写、空格都要一致。比如 [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"]

这些是进阶匹配方式，用途差异明显，容易混用：

WPS AI

金山办公发布的AI办公应用，提供智能文档写作、阅读理解和问答、智能人机交互的能力。

下载

• [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 结构时，才值得投入精力设计属性匹配逻辑。