在CSS属性select器中,“我”是什么意思?

我在Google Chrome用户代理样式表中find以下CSSselect器:

[type="checkbox" i] 

i是什么意思?

2 Solutions collect form web for “在CSS属性select器中,“我”是什么意思?”

正如评论中所提到的,它是用于不区分大小写的属性匹配。 这是CSSselect器级别4的新function。

目前,它可用于Chrome 49 +,Firefox 47+,Safari 9+和Opera 37 + *。 在此之前,它只能在Chrome 39用户代理样式中使用,但可以通过设置实验function标志启用Web内容。

Opera的早期版本也可能支持它。

工作示例/浏览器testing:

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

这是select器4中引入的属性select器不区分大小写的标志。 显然,他们早在2014年8月就将这个function的实现隐藏到了Chrome中。

简而言之:该标志告诉浏览器不区分大小写地匹配type属性的值。 HTML中的属性值的默认select器匹配行为是区分大小写的 ,这通常是不希望的,因为许多属性被定义为不区分大小写的值,并且您要确保您的select器在所有情况下都会选取所有正确的元素。 type是这样一个属性的一个例子,因为它是一个枚举属性 , 枚举属性被认为是不区分大小写的值 。

这里是相关的提交:

  • 179370 – 执行
  • 179401 – 更改到UA样式表,如问题的屏幕截图所示

请注意,它目前隐藏在“启用实验性Web平台function”标志中,您可以在chrome:// flags /#enable-experimental-web-platform-features中访问该标志。 这也许可以解释为什么这个function在很大程度上被忽视了 – 隐藏在该标志后面的function只能在内部使用,而不能在公共代码中使用(例如作者样式表),除非启用,因为它们是实验性的,因此不能用于生产。

以下是您可以使用的testing用例 – 比较标志启用和禁用时的结果:

 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> 
  • 如何select给定类名的第一,第二或第三个元素?
  • 第一个孩子和第一个孩子之间有什么区别?
  • CSSselect器和jQueryfilter之间的区别?
  • 通配符*在CSS的类
  • 之前和之前有什么区别?
  • 是否有一个解决方法,使CSS名称以数字开头有效的类?
  • :之后和:在萨斯的伪元素select器之前
  • 我可以有多个:在同一个元素的伪元素之前?
  • 有没有CSS不等于select器?
  • 只有在有2个类的情况下,才能用CSS来定位元素?
  • 可点击视图中的默认select器背景