今天，我偶然发现了 caniuse.com 项目的一期，其中提到了新的和即将推出的 CSS Level 4 选择器。

这个列表很长，并且有许多新的选择器正在开发中。一个新的选择器标志引起了我的注意；属性选择器将变成一个 i 标志，这使得它不区分大小写。

/*** matches:* <div class="foo">...</div>* <div class="Foo">...</div>* <div class="fOo">...</div>* ...*/
[class=foo i] {color: red;
}

浏览器支持看起来也不错。

如果你想玩它，我创建了一个 codepen。我能想到的唯一有用的情况是当你必须处理用户生产内容时，用户输入不准确数据的可能性很高。我很想了解更多关于其他用例的信息——如果你有什么想法，请告诉我！

编辑：Dominik 指出，这对于使用 value 属性的输入字段中的用户生成内容确实有用。

/*** matches:* <input value="hello world">* <input value="hello World">* <input value="hElLo WoRlD">* ...*/
[value="hello world" i] { /* ... */ }

---

原文：https://www.stefanjudis.com/today-i-learned/the-css-attribute-selector-has-a-case-insensitive-mode/?