这是在选择器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;
}
If all of this text is green,
your browser supports case-insensitive attribute selectors.
请注意,我使用自定义数据属性,而不是type显示它几乎可以与任何属性一起使用。
在撰写本文时,我还没有其他实现方式,但是希望其他浏览器会很快赶上。这是对该标准的相对简单但极其有用的补充,我希望将来能够使用它。