什么是“i”在CSS属性选择器中的意思？ [英] What does "i" mean in a CSS attribute selector?

问题描述

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

  [type =checkboxi] 
  

i 是什么意思？ p>

解决方案

如注释中所述，它是用于不区分大小写的属性匹配。 这是CSS选择器第4级的新功能。

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

*较早

工作示例/浏览器测试：

  [data-test] {width：100px; height：100px; margin：4px;} [data-test =A] {background：red;} [data-test =ai] {background：green;}  
 绿色如果支持，红色如果没有：< div data-test =A>< / div& / code> 
 

如果浏览器支持此功能，如果没有。

I have found the following CSS selector in the Google Chrome user agent stylesheet:

[type="checkbox" i]

What does the i mean?

解决方案

As mentioned in the comments, it is for case-insensitive attribute matching. This is a new feature in CSS Selectors Level 4.

Presently it is available in Chrome 49+, Firefox 47+, Safari 9+, and Opera 37+*. Prior to this it was only available in the Chrome user-agent styles starting around Chrome 39, but could be enabled for web content by setting the experimental features flag.

* Earlier versions of Opera may also support it.

Working Example / Browser Test:

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

The above square will be green if the browser supports this feature, red if it does not.

这篇关于什么是“i”在CSS属性选择器中的意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！