如何在使用 start 属性的有序列表中设置标记样式？答案

【问题标题】：How to style markers in an ordered list that uses start attribute?如何在使用 start 属性的有序列表中设置标记样式？
【发布时间】：2016-03-01 02:06:34
【问题描述】：

如何为 HTML“start”属性添加样式？

即使我将样式应用于整个有序列表标签，我也无法定位数字。

//CODE:
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

输出：

咖啡
茶
牛奶

【问题讨论】：

<ol> with numbers another color的可能重复
嘿，Lister 先生，这不是重复的，因为这个问题是特定于“start”属性的。
我不确定你的意思。您的问题与列表以 1 开头的问题有何不同？

标签： html css twitter-bootstrap html-lists

【解决方案1】：

您可以为此使用counter-reset 和counter-increment 属性。不过，您必须在列表项上使用 :before 伪元素。

这是一个例子。

首先你必须启动计数器。您可以使用 counter-reset 属性来做到这一点。

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

counter-reset的语法如下

counter-reset: none|name number|initial|inherit;

我们在这里给出名称，然后是您想要开始的数字。由于它默认从 0 开始，因此您要选择 49 而不是 50。

我们终于可以开始设计我们的数字以使其看起来更漂亮了。我们使用:before 伪元素来做到这一点。在 content 属性中，我们可以包含计数器的值，我们使用上面的 counter-reset 属性定义了它。

li:before {
   margin-right: 10px;                           // Gives us breathing room after number
   padding: 3px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;                          // Gives circle shape
   color: white;
   width: 1.2em;                            
   text-align: center;
   display: inline-block;
 }

 ol {
   counter-reset: item 49;
   list-style: none;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li:before {
   margin-right: 10px;
   padding: 3px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

还应注意counter-reset 和counter-increment 仅适用于IE8 或更高版本。

https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment

【讨论】：

【解决方案2】：

对于 2025 年看到这个问题的任何人：

The ::marker pseudo-element

本规范定义了一种新的伪元素类型，即 ::marker 伪元素，由列表项生成表示项目的标记（标识每个项目的项目符号或数字项目）。

这个伪元素可以像真正的元素一样设置样式，并且可以满足问题中的要求。不幸的是，它目前享有零浏览器支持。

更多信息：

【讨论】：

这实际上是一个没有成功的提议，所以我不太确定它会在几年内重新出现。
@MrLister，没有成功还是没有成功？它仍在 W3C 草案中。有什么说它已被永久排除在考虑范围内吗？

【解决方案3】：

我认为您可以使用<span> 之类的元素来分隔数字样式和列表项样式，如下所示：

<style>
    ol > li { color: #00F; }
    ol > li > span { color: #000; }
</style>

<ol start="50">
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Milk</span></li>
</ol>

【讨论】：