CSS属性选择器中"i"的含义是什么？含浏览器默认样式实例问询

嘿，这个细节抓得不错！你在浏览器默认样式里看到的那个i，是CSS属性选择器里的不区分大小写匹配标志。

核心作用 #

正常情况下，CSS属性选择器的属性值匹配是严格区分大小写的：

• 比如input[type="hidden"]只会精准匹配type属性值为全小写hidden的<input>元素。
• 但加上i之后，input[type="hidden" i]就会忽略属性值的大小写，不管type写的是HIDDEN、Hidden还是hiDdeN，都会被这个选择器命中。

浏览器默认样式里的应用场景 #

你看到的这段浏览器默认样式，其实是为了兼容不规范的旧代码——有些早期网页可能会把type="hidden"写成大写形式，加了i就能确保不管开发者怎么写，隐藏输入框都会被正确设置为display: none，避免出现不该显示的内容。

补充说明 #

这个不区分大小写的匹配标志是CSS Selectors Level 4规范中新增的特性，目前主流浏览器（Chrome、Firefox、Edge等）都已经支持。

内容的提问来源于stack exchange，提问作者Kevin