css - "i"在 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 的早期版本可能也支持它。

工作示例/浏览器测试:

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

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