CSS 属性选择器和区分大小写的“类型”属性与虚构属性

Posted 2023-03-06

【中文标题】CSS 属性选择器和区分大小写的“类型”属性与虚构属性

【英文标题】：CSS attribute selector and case sensitivity with the "type" attribute vs. made-up attributes

【发布时间】：2019-04-05 14:01:59

【问题描述】：

我正在尝试根据其类型属性设置 OL 的样式。所有 UL 和 OL 的列表样式属性之前已被另一个我无法真正修改的 CSS 样式表删除，我需要重新设置列表样式的样式，考虑到类型，即如果 OL 应该使用罗马字符或字母数字等。

这很容易，我想；我将使用属性选择器根据 type 属性的值来定位 OL。属性选择器区分大小写，所以这应该很简单吧？

错误 - 至少在您尝试使用标准“类型”属性时。

这是一个示例（有效）：

/* Remove default list style */
ul, ol  list-style:none; 

/* This works, using a non-standard foo attribute. The selector is case sensitive, so I can target 'i' and 'I' separately */
ol[foo='i'] 
  list-style-type:lower-roman;


ol[foo='I'] 
  list-style-type:upper-roman;

<ol foo="i">
  <li>Styled with lower case roman</li>
  <li>Styled with lower case roman</li>
</ol>

<ol foo="I">
  <li>Styled with uppercase roman</li>
  <li>Styled with uppercase roman</li>
</ol>

现在，将foo 替换为type，然后重试：

/* Remove default list style */
ul, ol  list-style:none; 

/* Trying to use the standard type attribute, the selector is no longer case sensitive, so I cannot style 'i' and 'I' individually .... */
ol[type='i'] 
  list-style-type:lower-roman;


ol[type='I'] 
  list-style-type:upper-roman;

<ol type="i">
  <li>Should be lower-case roman</li>
  <li>Should be lower-case roman</li>
</ol>

<ol type="I">
  <li>Should be upper-case roman</li>
  <li>Should be upper-case roman</li>
</ol>

现在就像选择器不再区分大小写并且两个列表都受到影响，并且都使用大写罗马字母。

我无法找到任何信息这是否是正确的行为，也就是说，当使用诸如“类型”之类的已知属性与使用诸如“foo”之类的非标准属性时。这在 Chrome 和 Firefox 中都发生的事实让人相信这不是一个错误。

有什么想法吗？

这里有一个 CodePen：https://codepen.io/haukurhaf/pen/NOQYOz

【问题讨论】：

“有什么想法吗？” - 仅作为一种解决方法，让处理这种情况变得不那么痛苦：您也许可以复制将type 属性转换为data-type 或其他内容（通过运行在内容上的javascript，或通过服务器端数据预处理），然后让您的CSS 规则以该属性为目标……

@misorude 是的，如果需要，实际上考虑过做类似的事情作为解决方法。谢谢。

【参考方案1】：

the introduction of a case-sensitive attribute selector flag s 已经解决了这个问题，以及强制属性选择器区分大小写匹配的更广泛用例：

ol[type='i' s] 
  list-style-type:lower-roman;


ol[type='I' s] 
  list-style-type:upper-roman;

现在我们等待实现...

---

html 规范似乎表明ol 的type 属性的行为是不正确的，但它使用某些关键字使得这一点不到100% 清楚。 Section 4.16.2 使用“必须”：

HTML 文档中 HTML 元素上的属性选择器必须将具有以下名称的属性值视为不区分 ASCII 大小写，但有一个例外，如 in the rendering section 所述：

... type（渲染部分中指定的除外）

为了选择器匹配的目的，所有其他属性值和其他所有内容都必须完全区分大小写。

并指向section 14.3.8，它使用abstract of section 14 中描述的“预期”（tl;dr：如果浏览器选择不遵循“预期”中所述的内容，则不一定违反规范行为）：

以下规则也应适用，作为演示提示：

@namespace url(http://www.w3.org/1999/xhtml);

ol[type="1"], li[type="1"]  list-style-type: decimal; 
ol[type=a], li[type=a]  list-style-type: lower-alpha; 
ol[type=A], li[type=A]  list-style-type: upper-alpha; 
ol[type=i], li[type=i]  list-style-type: lower-roman; 
ol[type=I], li[type=I]  list-style-type: upper-roman; 
ul[type=none i], li[type=none i]  list-style-type: none; 
ul[type=disc i], li[type=disc i]  list-style-type: disc; 
ul[type=circle i], li[type=circle i]  list-style-type: circle; 
ul[type=square i], li[type=square i]  list-style-type: square; 

在上述样式表中，ol 和 li 元素的属性选择器应被视为区分大小写。

鉴于后者描述的预期行为比实际浏览器行为更符合作者的预期，我要说这确实是不正确的行为，尽管“预期”一词是允许的。

【讨论】：

仔细检查后，它看起来像 applies only to UA stylesheets 异常，使您看到的行为对于作者 CSS 是正确的。这让我大吃一惊，因为这样做只是为了阻止作者应用自定义的大写/小写计数器样式，除了“它是互操作的，没有人有兴趣更改它”。

@HaukurHaf：我刚刚在 WHATWG 提交了一个问题：github.com/whatwg/html/issues/4158（我也链接到了这个问题，尽管您的情况更适合 list-style: revert 在一个得到广泛支持的理想世界中.)