如何在使用开始属性的有序列表中设置标记的样式? [英] How to style markers in an ordered list that uses start attribute?

问题描述

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

How do you add styles to the HTML "start" attribute?

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

I am unable to target the number even if I apply styles to the entire ordered list tag.

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

输出:

OUTPUT:

1. 咖啡
2. 茶
3. 牛奶

推荐答案

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

You can use the counter-reset and counter-increment properties for this. You have to use the :before pseudo element on the list items though.

这里是一个例子.

首先，您必须启动计数器.您可以使用counter-reset属性.

First you have to start the counter. You can do that with the counter-reset property.

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

计数器重置的语法如下

计数器重置:无|名称编号|初始|继承；

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

在这里，我们给您起一个名字，后跟您想开始的数字.由于默认情况下它从0开始，因此您要选择49而不是50.

Here we're giving the name, followed by the number you want to start after. Since it starts at 0 by default, you want to choose 49 and not 50.

我们终于可以开始对数字进行样式设计，使其看起来更漂亮了.我们使用:before伪元素执行此操作.在content属性中，我们可以包含计数器的值，该值是通过上面的counter-reset属性定义的.

We can finally begin styling our numbers to make it look pretty. We do this with the :before pseudo-element. In the content property, we can include the value of our counter, which we defined with the counter-reset property above.

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或更高版本.

It should also be noted that counter-reset and counter-increment only work on IE8 or higher.

https://developer.mozilla.org/zh- US/docs/Web/CSS/counter-crement

这篇关于如何在使用开始属性的有序列表中设置标记的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！