属性选择器大小写匹配与i/s修饰符使用详解

• i 必须紧贴右括号，写成 [attr="val"i] 或 [attr="val" i] 都合法，但 [attr="val" I]（大写）无效
• 仅支持 ASCII 字母的大小写折叠，对 Unicode（如中文、德语 ß）无影响
• 目前所有现代浏览器（Chrome 63+、Firefox 61+、Safari 15.4+、Edge 79+）均已支持，IE 完全不支持

[attr~="val" i] 和 [attr*="val" i] 也支持 i

i 修饰符适用于所有属性选择器类型，包括：

• [attr="val" i]：完全匹配（推荐用于明确值）
• [attr~="val" i]：空格分隔单词匹配（如 class="btn primary" 中匹配 primary）
• [attr*="val" i]：子串匹配（注意性能，避免在长文本上滥用）
• [attr^="val" i] 和 [attr$="val" i]：前缀/后缀匹配也生效

但 [attr]（存在性检查）和 [attr=val]（无引号等价于 [attr="val"]）不支持 i，必须显式加引号才能用修饰符。

兼容旧浏览器时的降级方案

若需支持 IE 或极老版本，无法使用 i，只能靠预处理或 JS 补位：

• 服务端或构建时统一标准化属性值（如全部转小写），再用标准选择器
• 用 JS 动态添加 class：document.querySelectorAll('[data-status]').forEach(el => el.classList.add(el.dataset.status.toLowerCase()))，再用 .pending 这类类名控制样式
• 避免依赖大小写不敏感的纯 CSS 方案——这是最稳妥的选择

真正要注意的是：很多人以为加了 i 就能解决所有“不匹配”问题，结果发现是属性名拼错、HTML 命名空间干扰、或属性根本没被渲染出来——先确认 getBoundingClientRect() 或 DevTools 中确实存在对应属性值，再谈大小写。

好了，本文到此结束，带大家了解了《属性选择器大小写匹配与i/s修饰符使用详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！