CSS 属性选择器中'i”标志的用途是什么？

CSS 属性选择器中的“i”有什么作用？

在 CSS 中，你可能会遇到带有附加“i”的属性选择器，如下所示来自 Google Chrome 用户代理样式表的示例：

[type="checkbox" i]

这个“i”指定不区分大小写的属性匹配，这是 CSS 中引入的一项创新选择器级别 4。

浏览器兼容性

虽然 Chrome (49 )、Firefox (47 )、Safari (9 ) 和 Opera (37 ) 等流行浏览器目前支持此功能，它最初仅在 Chrome 39 左右的 Chrome 用户代理样式中可用。Web 开发人员可以通过配置实验性功能来为 Web 内容启用它标志。

示例

这里有一个测试浏览器支持的快速演示：

<!-- Color will be green on supported browsers, red on unsupported -->

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

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

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

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

以上是CSS 属性选择器中'i”标志的用途是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！