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

Question

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

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

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

OUTPUT:

50. 咖啡
51. 茶
52. 牛奶

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