在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> 
  • 在CSS中按数据属性select元素
  • 什么JQueryselect器排除项与父母匹配给定的select器?
  • 萨斯和组合的孩子select
  • n-child对class级没有反应
  • 纯CSScheckbox图像replace
  • jQuery:包含select器来search多个string
  • CSS规则只适用于元素有两个类
  • querySelectorsearch直接的孩子
  • select基于多个类的元素
  • 如何select连续的第一个和最后一个TD?
  • CSS子对VS后代select器