CSS属性选择器和区分大小写,具有"type"属性与make-up属性

Question

我正在尝试根据其type属性设置OL的样式.所有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>

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

我无法找到任何关于这是否是正确行为的信息,也就是说,当使用诸如'type'之类的已知属性与使用非标准属性(如'foo')时.在Chrome和Firefox中都会发生这种情况,这一事实让人相信它不是一个错误.

有任何想法吗？

这是一个混乱的CodePen:https://codepen.io/haukurhaf/pen/NOQYOz

Answer 1

通过引入区分大小写的属性选择器标志s,已经解决了这个以及强制属性选择器匹配大小写的更广泛的用例:

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

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

现在我们等待实施......

HTML规范似乎表明type属性的行为ol是不正确的,但它使用某些关键字使得这一点不到100%清晰.第4.16.2节使用"必须":

HTML文档中HTML元素上的属性选择器必须将具有以下名称的属性值视为ASCII不区分大小写,但有一个例外,如呈现部分所述:

• ...
• type (除了在渲染部分中指定)

为了选择器匹配的目的,必须将所有其他属性值和其他所有值视为完全区分大小写.

并指向第14.3.8节,其中使用了"预期",如第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元素的属性选择器应该被视为区分大小写.

鉴于后者所描述的预期行为更符合作者的期望,而不是实际的浏览器行为,我会说尽管"预期"一词具有允许性,但这确实是不正确的行为.