【发布时间】：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 是的，如果需要，实际上考虑过做类似的事情作为解决方法。谢谢。
标签： html css css-selectors html-lists case-sensitive