我正在尝试根据其type属性设置OL样式.所有UL和OL的列表样式属性之前已经被另一个我无法修改的CSS样式表消灭了,我需要重新设置列表样式,将类型考虑在内,即如果OL应该使用Roman人物或字母数字等
@H_403_2@我想,这很容易;我将使用属性选择器根据type属性的值来定位OL.属性选择器区分大小写,所以这应该很简单,对吧?
@H_403_2@错 – 至少在您尝试使用标准“类型”属性时.
@H_403_2@这是一个例子(有效):
/* 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>@H_403_2@现在,用类型替换foo并再试一次:
/* 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>@H_403_2@现在它就像选择器不再区分大小写,并且两个列表都受到影响,并且都使用大写罗马. @H_403_2@我无法找到任何关于这是否是正确行为的信息,也就是说,使用非标准属性(如’foo’)使用已知属性(如’type’v.s)时.在Chrome和Firefox中都会发生这种情况的事实让人相信它不是一个错误. @H_403_2@有任何想法吗? @H_403_2@这是一个混乱的CodePen:https://codepen.io/haukurhaf/pen/NOQYOz
解决方法
这个以及强制属性选择器匹配区分大小写的更广泛的用例已在
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; }@H_403_2@现在我们等待实施…… @H_403_2@HTML规范似乎表明ol的type属性的行为是不正确的,但是它对某些关键字的使用使得它不到100%清晰. Section 4.16.2使用“必须”:
@H_403_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 07002: @H_502_39@@H_403_2@并指向section 14.3.8,它使用abstract of section 14中描述的“预期”(tl; dr:浏览器不一定违反规范,如果它选择不遵循所谓的“预期”行为):… @H_403_2@All other attribute values and everything else must be treated as entirely case-sensitive for the purposes of selector matching. type
(except as specified in the rendering section)
@H_403_2@The following rules are also expected to apply,as presentational hints: @H_403_2@06001 @H_403_2@In the above style sheet,the attribute selectors for the@H_403_2@鉴于后者所描述的预期行为更符合作者的期望,而不是实际的浏览器行为,我会说尽管“预期”一词具有允许性,但这确实是不正确的行为.ol
andli
elements are expected to be treated as case-sensitive.