css - 方括号中的 "i"在 CSS 选择器中有什么作用？

Question

<分区>

Answer 1

这是 Case-Sensitive Attribute Selector已在 Selectors Level 4 工作草案中引入:

E[foo="bar" i]
An E element whose foo attribute value is exactly equal to any (ASCII-range) case-permutation of bar.

6.3. Case-sensitivity

By default case-sensitivity of attribute names and values in selectors depends on the document language. To match attribute values case-insensitively regardless of document language rules, the attribute selector may include the identifier i before the closing bracket (]). When this flag is present, UAs must match the attribute's value case-insensitively within the ASCII range.

Example 13

The following rule will style the frame attribute when it has a value of hsides, whether that value is represented as hsides, HSIDES, hSides, etc. even in an XML environment where attribute values are case-sensitive.

[frame=hsides i] { border-style: solid none; }

值得注意的是，目前浏览器对此的支持即使不是不存在也将非常差。确实使用此选择器的现有 CSS 实现可能正在使用外部 JavaScript 库来模仿选择器级别 4 的定义。