什么是；我"；在CSS属性选择器中是什么意思？

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

[type="checkbox" i]

i

是什么意思

---

如注释中所述，它用于不区分大小写的属性匹配

目前，它在Chrome 49+、Firefox 47+、Safari 9+和Opera 37+*中可用。在此之前，它仅在Chrome39左右开始的ChromeUserAgent样式中可用，但可以通过设置ExperimentalFeatures标志为web内容启用

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

工作示例/浏览器测试：

[数据测试]{
宽度：100px；
高度：100px；
保证金：4倍；
}
[数据测试=“A”]{
背景：红色；
}
[数据测试=“a”i]{
背景：绿色；
}

绿色（如果支持），红色（如果不支持）：

这是属性选择器的不区分大小写标志，在中引入。很显然，他们早在2014年8月就在Chrome中偷偷实现了这一功能

简而言之：该标志告诉浏览器不敏感地匹配

类型

属性大小写的相应值。HTML中属性值的默认选择器匹配行为是，这通常是不可取的，因为许多属性定义为不区分大小写的值，并且您希望确保选择器选择所有正确的元素，而不考虑大小写<代码>类型是此类属性的一个示例，因为，和

以下是相关承诺：

• -实施
• -对UA样式表的更改，如问题中的屏幕截图所示

请注意，它当前隐藏在“启用实验性Web平台功能”标志中，您可以在chrome://flags/#enable-实验性web平台功能。这可能解释了为什么该特性在很大程度上没有被注意到——隐藏在该标志后面的特性只能在内部使用，而不能在面向公众的代码（如作者样式表）中使用，除非它被启用，因为它们是实验性的，因此不适合生产使用

下面是一个您可以使用的测试用例-在启用和禁用标志时比较结果：

span[data foo=“bar”]{
颜色：红色；
}
span[data foo=“bar”i]{
颜色：绿色；
}

如果此文本全部为绿色，
您的浏览器支持不区分大小写的属性选择器。

感谢您的指导！喜欢你的新帽子。这种事情在选择器库中有效吗？它有什么样的浏览器支持？@BenjaminGruenbaum它看起来只有Chrome用户代理样式（不是网站的CSS，至少还没有）。我找不到任何官方的兼容性文档（现在问题已经合并，请转载我之前的评论）。像这样全新的实验性标准没有很好的文档记录也就不足为奇了。也就是说，我的回答包含了更多关于这方面的信息，即它是如何工作的，为什么使用它，以及它是如何在Chrome中实现的（如问题所给出的）。Chrome将在49.0版（目前处于测试版）和47.0版Firefox（计划于2016年6月发布）中添加对这方面的支持。来源：@lwcris：我不确定是否真的存在这样的浏览器。IE6根本不理解属性选择器，IE7甚至支持自定义数据属性。。。在阅读了W3规范之后，我仍然没有完全理解，css中的实际用法是什么？@Matt:Attribute selector matching是区分大小写的，这在很多情况下是不可取的，因为HTML5允许对某些属性使用不区分大小写的值。您可以使用此标志来确保无论大小写都选择正确的元素。例如，在屏幕截图中，您可以看到它查找

输入[type=“search”i]

，这将匹配

等元素。我可以确认它与Chromium 43.0.2357.130版和“启用实验性Web平台功能”一起使用已启用。@Alexander O'Mara:选择器级别4是CSS3的一部分-它只是从级别3开始的模块的下一个级别。“CSS4”是一个用词不当的词。@Alexander O'Mara:我很想看到它在meta上出现。特别是我想知道我们如何处理[css4]标记的使用-我能采取的最激烈的措施是将其作为[css3]的同义词，这实际上是正确的做法。@BoltClock顺便说一句，当你问到将你的答案与这个问题合并时，你的意思是编辑问题/答案以添加信息，或者你指的是一个神奇的移动到另一个问题按钮的答案？@Alexander O'Mara：不是移动单个答案，而是将两个完整的问题组合在一起。这是一个mod-only函数。请随意添加讨论内容。