CSS 属性选择器中的“i”是啥意思？

Posted 2023-03-06

【中文标题】CSS 属性选择器中的“i”是啥意思？

【英文标题】：What does "i" mean in a CSS attribute selector?CSS 属性选择器中的“i”是什么意思？

【发布时间】：2015-03-18 23:08:37

【问题描述】：

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

[type="checkbox" i]

i 是什么意思？

【问题讨论】：

@Alexander O'Mara：选择器级别 4 是 CSS3 的一部分 - 它只是从级别 3 开始的模块的下一个级别。“CSS4”用词不当。

@Alexander O'Mara：我很想看到它出现在元数据上。特别是我想知道我们如何处理 [css4] 标签的使用 - 我可以采取的最激烈的措施是让它成为 [css3] 的同义词，这实际上是正确的做法。

@BoltClock Meta Question is up! BTW，当您询问将您的答案与此问题合并时，您的意思是在此处编辑问题/答案以添加信息，还是您指的是魔术动作-回答另一个问题按钮？

@Alexander O'Mara：不移动单个答案，而是结合两个完整的问题。这是一个仅限 mod 的功能。

@TylerH 我们有a discussion on Meta on this topic。随意添加到那里的讨论。

【参考方案1】：

如 cmets 中所述，它用于不区分大小写的属性匹配。 This is a new feature in CSS Selectors Level 4.

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

* 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>

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

【讨论】：

感谢教导！享受你的新帽子。这种事情在选择器库中有效吗？它有什么样的浏览器支持？

@BenjaminGruenbaum 看起来它只在 Chrome 用户代理样式中可用（不是网站的 CSS，至少现在还没有）。我找不到任何官方的兼容性文档。

（现在问题已合并，重新发布我之前的评论。）像这样的全新实验性标准没有充分记录并不完全令人惊讶。也就是说，我的回答包含更多关于此的信息，即它是如何工作的，为什么使用它，以及它是如何在 Chrome 中实现的（如问题所示）。

Chrome 将在 49.0 版（目前处于 Beta 版）中添加对此的支持，Firefox 在 47.0 版（计划于 2016 年 6 月发布）中添加对此的支持。来源：developer.mozilla.org/en-US/docs/Web/CSS/…

@LWChris：我不确定是否真的存在这样的浏览器。 IE6 根本不理解属性选择器，IE7 甚至支持自定义数据属性。

【参考方案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 来表明它几乎可以与任何属性一起使用。

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

【讨论】：

我有“那个下午”的疲劳......在阅读了 W3 规范后我仍然没有完全理解，这在 css 中的实际应用是什么？

@Matt：属性选择器匹配与stated in HTML5 一样区分大小写，这在许多情况下是不可取的，因为 HTML5 允许某些属性的值不区分大小写。无论大小写如何，您都可以使用此标志来确保选择正确的元素。例如，在屏幕截图中，您可以看到它查找 input[type="search" i]，它将匹配 <input type="SEARCH"> 等元素。

我可以确认它适用于 Chromium 版本 43.0.2357.130 并启用了“启用实验性 Web 平台功能”。