HTML5的::-moz-list-number替代方案

Question

如何定义适用于 <ol reversed> 的 HTML5 列表编号样式？

我发现 ::-moz-list-number，但它只在 Firefox 中有效。有没有更好的替代方法来实现相同的效果？

- ceving

---

HTML为什么会提供一个伪元素的替代方案？ - BoltClock

@BoltClock 读作“一个 CSS（任何版本）伪元素，在现代浏览器中工作，支持 HTML5”。 - ceving

@BoltClock，你能给我展示一下你所参考的答案吗？它是指“这个问题已经被问过并且已经有了答案”？ - ceving

Answer 1

我完全忽略了非常明显的reverse部分。看起来你可能需要做<li><span>Item</span></li>并在<span>中取消样式，这样就可以将样式应用到<li>上。

---

旧答案（对某些人可能有用）。

您可以为::before添加样式并添加content: counter(someCounter)。

ol {
  list-style: none;
  counter-reset: item;
}

ol li::before {
  counter-increment: item;
  content: counter(item) ". ";
  color: red;
  font-weight: bold;
}

这是一个快速演示：https://jsfiddle.net/crswll/toggchgd/1/

- Bill Criswell

---

这忽略了“与<ol reversed>兼容”的部分。 - ceving

该死。定义计数器时居然没有这个选项，我很震惊。我知道你可以这样做，但是除非你知道列表中的项目数量，否则它就没什么用：https://jsfiddle.net/crswll/toggchgd/2/ - Bill Criswell

看起来你唯一的选择是将<span>标签放在文本周围，然后不幸地取消对li所做的样式。 - Bill Criswell

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Bill Criswell

“在定义计数器时，没有为此提供选项，这让我感到震惊。” 我怀疑问题出在 CSS 无法提前确定要从哪些元素进行倒数计数。请记住，计数器可以具有任意范围。 - BoltClock

是的。由于“reversed”属性允许这种情况发生，出于某种原因，我认为它可能以某种方式可用。 - Bill Criswell