Question

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

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

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

输出：

咖啡
茶
奶

Answer 1

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

这是一个例子。

首先你必须启动计数器。您可以使用counter-reset属性执行此操作。

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

计数器重置的语法如下

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

Answer 2

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

The ::marker pseudo-element

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

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

更多信息：

Answer 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>

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

3 个答案: