Question

我试图根据OL的type属性设置其样式。所有UL和OL的列表样式属性之前都已被另一个我无法真正修改的CSS样式表抹掉，因此我需要重新考虑样式，考虑到类型，即OL是否应使用Roman字符或字母数字等。

那很简单，我想；我将仅使用属性选择器基于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中都发生这种情况的事实使人们相信这不是错误。

有什么想法吗？

这是一个可与https://codepen.io/haukurhaf/pen/NOQYOz

一起使用的CodePen

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规范似乎暗示type的{{1}}属性的行为是不正确的，但是使用某些关键字会使这一点不足100％。 Section 4.16.2使用“必须”：

HTML文档中HTML元素上的属性选择器必须将具有以下名称的属性值视为ASCII大小写不敏感，但in the rendering section除外：


...

ol（在“渲染”部分中指定的除外）


所有其他属性值以及其他所有属性都必须完全区分大小写，以进行选择器匹配。

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

作为提示，还应遵循以下规则：
type
在上述样式表中，@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元素的属性选择器应区分大小写。

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

CSS属性选择器和区分大小写以及“ type”属性与虚构属性

1 个答案: