TL; DR
不要给您的柜台命名list-item
问题:
CSS计数器相对容易理解,documented很好,good browser support也有。
但是,我遇到了我不了解的意外行为,以及在哪里想知道为什么会发生这种情况。可能只是浏览器中的错误……
在下面的示例中,我们可以看到计数器按预期工作:
ol {
list-style-type: none;
counter-reset: list-counter;
}
ol>li {
counter-increment: list-counter;
}
ol>li:before {
content: counter(list-counter) '. ';
}
<ol>
<li>n</li>
<li>n</li>
<li>n</li>
<li>n</li>
</ol>
<ol>
<li>n</li>
<li>n</li>
<li>n</li>
</ol>
<ol>
<li>n</li>
<li>n</li>
</ol>
但是将计数器的标识符更改为list-item
时,我们可以看到它在不同的浏览器中的行为不同:
ol {
list-style-type: none;
counter-reset: list-item;
}
ol>li {
counter-increment: list-item;
}
ol>li:before {
content: counter(list-item) '. ';
}
<ol>
<li>n</li>
<li>n</li>
<li>n</li>
<li>n</li>
</ol>
<ol>
<li>n</li>
<li>n</li>
<li>n</li>
</ol>
<ol>
<li>n</li>
<li>n</li>
</ol>
尽管在Chrome和Firefox中它仍然可以按预期运行,但在Edge和Internet Explorer 11中,它从2开始计数并以2递增,而在Safari中,它从0开始计数但仍以1计数。
当注释掉counter-reset
属性时,它变得更加奇怪。 Safari然后可以正确计数,但是Chrome从2开始计数。当注释掉counter-increment
Chrome和IE / Edge时,它们实际上应该显示为0,但它们正确计数。
在玩这个游戏时,在不同的浏览器中还有其他奇怪的行为,而且只有当标识符为list-item
时,所有这一切。
当我最初遇到此问题时,未经进一步调查,我的第一个假设是它至少与display
属性值list-item
有关。如MDN所述:
list-item关键字使元素生成:: marker 伪元素,其内容由其列表样式属性指定 (例如,项目符号点)以及 指定其自身内容的类型。
请参阅:https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem
但是由于我找不到任何进一步的文档,我想知道不同的供应商如何实现类似的错误……
问题:
这里真的有我想念的东西吗?规范中是否有保留字用于标识符? list-item
有什么特别之处吗?
在W3C规范中,我找不到有关它的任何信息:
https://www.w3.org/wiki/CSS/Properties/counter-increment
https://www.w3.org/wiki/CSS/Properties/counter-reset
其他信息:
为完整起见,以下是使用的版本:
答案 0 :(得分:4)
Gabriele Petrioli猜对了。 list-item
是css-lists-3 spec中定义的内置计数器,其描述如下:
[...]列表项会自动增加特殊的“列表项”计数器。除非“ counter-increment”属性手动为“ list-item”计数器指定了不同的增量,否则在每个列表项上必须将其递增1,而计数器通常会递增。 (这对“ counter- *”属性的值没有影响。)
此计数器未在CSS2中定义,因此是css-lists-3的新增功能。但是实际上它确实很旧-at least 16 years old,甚至可以追溯到CSS3规范的FPWD。通常,列表和计数器样式在CSS3中得到了重大升级,这意味着“ CSS计数器相对易于理解,文档完善并且具有良好的浏览器支持”。随着新规范的最终确定和采用,可能会在一段时间内不再成立。)我不确定实现或规范是最先出现的,但是大概是因为由于没有人使用list-item
作为实现而添加了实现。当时的情况恰恰相反(在2002年IE6还是全新的时候,CSS2的采用还远远没有普及)。
该功能本身(尽管已在规范中使用了十多年)仍为still in limbo,并且预计不会进行互操作。无论如何,您的建议都是正确的:不要为您的柜台命名list-item
。实际上,它是计数器的特殊关键字值,由于上述互操作问题,在作者CSS中使用时会产生意外结果。
请记住,即使W3C Wiki由W3C维护,也不是“ W3C规范”。规范是在w3.org中找到的TR的工作草案,候选建议,提议的建议和建议,或者在dev.w3.org中或相应工作组决定托管其ED的任何地方的编辑草案。这些属性的Wiki页面通常不包含实际规格中提供的任何技术细节,因此,如果只看那里,就会错过很多这些细节。