带有计数器标识符“list-item”的奇怪浏览器行为

Question

TL; 博士

不要命名你的柜台 list-item

---

问题：

CSS 计数器相对容易理解，有据可查，并且有良好的浏览器支持。

但是，我遇到了我不理解的意外行为，我想知道为什么会发生这种情况。可能只是浏览器中的错误......

在以下示例中，我们可以看到计数器按预期工作：

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-incrementChrome 和 IE/Edge 时，虽然它们实际上应该显示 0，但它们正确计数。

在玩弄这个时，在不同的浏览器中还有更多奇怪的行为，并且所有这一切仅当标识符为list-item.

当我最初遇到这个问题时，我没有进一步调查的第一个假设是它至少与displayproperty value 有关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

---

附加信息：

为了完整起见，这里是使用的版本：

• Chrome 70.0.3538.110 MacOS Mojave 10.14.1
• 铬 70.0.3538.110 Windows 10 17134.407
• 边缘 17.17134 Windows 10 17134.407
• 火狐 63.0.3 MacOS Mojave 10.14.1
• 火狐 63.0.3 Windows 10 17134.407
• Internet Explorer 11.407.17134.0 Windows 10 17134.407
• Safari 12.0.1 MacOS Mojave 10.14.1

Answer 1

Gabriele Petrioli 猜对了。list-item是css-lists-3 规范中定义的内置计数器，其描述如下：

[...] 列表项会自动增加特殊的“列表项”计数器。除非 'counter-increment' 属性手动为 'list-item' 计数器指定不同的增量，它必须在每个列表项上增加 1，同时计数器通常会增加。（这对“counter-*”属性的值没有影响。）

此计数器未在 CSS2 中定义，因此是 css-lists-3 的新内容。但它实际上已经很老了——至少 16 岁，至少可以追溯到 CSS3 规范的 FPWD。总的来说，列表和计数器样式在 CSS3 中得到了显着的升级，这意味着声明“CSS 计数器相对容易理解，有很好的文档记录并且有很好的浏览器支持”。随着新规范的最终确定和采用，可能会在一段时间内不再适用；) 我不确定是实现还是规范首先出现，但大概是添加了实现，因为当时几乎没有人用作list-item计数器（在 2002 年，当 IE6 仍然是全新的时，CSS2 的采用还远未普及）。

尽管该功能在规范中已经存在了十多年，但仍处于不确定状态，预计还没有互操作。无论如何，您的建议是合理的：不要命名您的柜台list-item。事实上，它是一个特殊的计数器关键字值，由于上述互操作问题，在作者 CSS 中使用时会产生意想不到的结果。

请记住，W3C Wiki 不是“W3C 规范”，即使它由 W3C 维护。规范是在 w3.org 中作为 TR 找到的工作草案、候选建议、提议的建议和建议，或在 dev.w3.org 或相应工作组决定托管其 ED 的任何地方的编辑草案。属性的 wiki 页面通常不包含实际规范中存在的任何技术细节，因此如果您只看那里，您将错过很多这些细节。