CSS 属性选择器中的'i”修饰符有什么作用？

揭开 CSS 属性选择器中“i”的谜团

在 CSS 领域，神秘的字母“i”具有出现在属性选择器中，让许多人感到困惑。为了揭开它的神秘面纱，让我们深入研究它的用途并发现它给网页样式带来的意义。

CSS 属性选择器中的“i”是什么？

CSS 属性选择器中的“i”修饰符表示不区分大小写的属性匹配。 CSS 选择器级别 4 中引入的此功能允许灵活地匹配 HTML 属性，而不管其大小写。

它是如何工作的？

考虑以下代码片段：

[type="checkbox" i]

此选择器将匹配所有复选框输入元素，无论其“类型”是否属性可以是大写、小写或两者的混合。换句话说，它将匹配具有“type="Checkbox"”、“type="cHeCkBoX"”等属性的元素。

历史背景和可用性

不区分大小写的属性匹配最初是在 Chrome 的用户代理样式中引入的，但后来可以通过实验性功能为 Web 内容启用旗帜。此后，它在现代浏览器中获得了广泛的支持，包括 Chrome 49 、 Firefox 47 、 Safari 9 和 Opera 37 *。

示例和浏览器测试

至为了演示功能，让我们考虑一个为具有“data-test=”a”属性的元素设置绿色背景色的选择器，或者'data-test="A"'.

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

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

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

如果将此代码应用于以下 HTML：

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

如果不区分大小写，生成的元素将具有绿色背景浏览器支持属性匹配，不支持则显示红色。

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