我在Google Chrome用户代理样式表中找到了以下CSS选择器：

[type="checkbox" i]

什么i意思

如注释中所述，它用于不区分大小写的属性匹配。这是CSS选择器第4级的新功能。

目前，它在Chrome 49 +，Firefox 47 +，Safari 9+和Opera 37 + *中可用。在此之前，该功能仅在Chrome 39左右的Chrome用户代理样式中可用，但可以通过设置实验性功能标志为网络内容启用。

*早期版本的Opera也可能支持。

工作示例/浏览器测试：

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

如果浏览器支持此功能，则上面的方块将为绿色，否则为红色。

这是在选择器4中引入的属性选择器的大小写不敏感标志。显然，他们早在2014年8月就将这项功能的实现嵌入Chrome。

简而言之：此标志告诉浏览器type不区分大小写地匹配属性的各个值。HTML中属性值的默认选择器匹配行为是区分大小写的，这通常是不希望的，因为许多属性被定义为具有不区分大小写的值，并且您要确保选择器选择所有正确的元素，而不区分大小写。type是此类属性的一个示例，因为它是枚举的属性，并且枚举的属性被称为具有不区分大小写的值。

以下是相关的提交：

• 179370 —实施
• 179401 —对UA样式表的更改，如问题中的屏幕快照所示

请注意，它当前隐藏在“启用实验性Web平台功能”标记中，您可以从chrome：// flags /＃enable-experimental-web-platform-features访问该标记。这可以解释为什么该功能在很大程度上未引起注意-隐藏在该标志后面的功能只能在内部使用，除非启用，否则不能在面向公众的代码（例如作者样式表）中使用，因为它们是试验性的，因此尚未准备好用于生产。

您可以使用以下测试用例-启用和禁用该标志时比较结果：

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

请注意，我使用自定义数据属性，而不是type显示它几乎可以与任何属性一起使用。

在撰写本文时，我还没有其他实现方式，但是希望其他浏览器会很快赶上。这是对标准的相对简单但极其有用的补充，我希望将来能够使用它。