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

Question

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

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

错误 - 至少在您尝试使用标准 "type" 属性时是这样。

这是一个示例（有效）：

/* 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' v.s 使用非标准属性时，例如'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, which uses "expected" as described in the 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.

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

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

CSS attribute selector and case sensitivity with the "type" attribute vs. made-up attributes

html

css

case-sensitive

css-selectors

html-lists