什么＆＃34;我＆＃34;在CSS属性选择器中意味着什么？

Question

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

[type="checkbox" i]

i是什么意思？

Answer 1

如评论中所述，它是针对不区分大小写的属性匹配。 This is a new feature in CSS Selectors Level 4.

目前，它可用于Chrome 49 +，Firefox 47 +，Safari 9+和Opera 37 + *。在此之前，它仅适用于以Chrome 39开头的Chrome用户代理样式，但可以通过设置实验性功能标记来启用网络内容。

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

工作示例/浏览器测试：

＆＃13;

＆＃13;

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

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

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

＆＃13;

Green if supported, red if not:

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

＆＃13;

＆＃13;

＆＃13;

如果浏览器支持此功能，则上方为绿色，如果不支持，则为红色。

Answer 2

这是Selectors 4中引入的属性选择器的不区分大小写的标志。显然，他们早在2014年8月就已将此功能的实现隐藏在Chrome中。

简而言之：此标志告诉浏览器不区分大小写type属性的相应值。 HTML中属性值的默认选择器匹配行为是case-sensitive，这通常是不受欢迎的，因为许多属性被定义为具有不区分大小写的值，并且您希望确保选择器选择所有正确的元素而不管大小写。 type是此类属性的一个示例，因为it is an enumerated attribute和enumerated attributes are said to have case-insensitive values。

以下是相关提交：

• 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来表明它可以与任何属性一起使用。

在撰写本文时，我不知道任何其他实现，但希望其他浏览器很快就能赶上。这是对标准的一个相对简单但非常有用的补充，我期待将来能够使用它。