html - "type"属性与虚构属性的 CSS 属性选择器和区分大小写

Question

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

这很容易，我想；我将只使用属性选择器根据类型属性的值来定位 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>

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

我无法找到任何信息来判断这是不是正确的行为，也就是说，当使用已知属性(例如“type”)与使用非标准属性(例如“foo”)时。这在 Chrome 和 Firefox 中都会发生，这一事实让人相信这不是错误。

有什么想法吗？

这里有一个 CodePen 可以乱用:https://codepen.io/haukurhaf/pen/NOQYOz

Answer 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使用“必须”:

Attribute selectors on an HTML element in an HTML document must treat the values of attributes with the following names as ASCII case-insensitive, with one exception as noted in the rendering section:

• ...
• type (except as specified in the rendering section)

All other attribute values and everything else must be treated as entirely case-sensitive for the purposes of selector matching.

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

The following rules are also expected to apply, as presentational hints:

@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; }

In the above style sheet, the attribute selectors for the ol and li elements are expected to be treated as case-sensitive.

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