如何为有序列表编号执行 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 样式？

Question

我尝试使用 CSS 更改有序列表编号的样式，但我得到了一些错误的结果。

<ol>
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
</ol>

CSS

ol li {
  counter-increment: step-counter;
  margin-bottom: 10px;
  list-style-type: none;
}

ol li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 15px;
}

上面的代码显示了 2 个列表编号（一个默认值，另一个是我定义的样式）。 output 就像

1. 1. 这是我的第一个项目
2. 2. 这是我的第二个项目

那么，为什么它会出现两次。 请帮助一次性获得（第二个是我定义的风格）

Answer 1

custom-counter是一个无效的选择器，即使它是有效的，它也不会指向任何内容。 只需删除整个规则集，然后添加list-style-type: none; 到<ol>如下：

ol {list-style-type: none;}

将position:relative分配给所有<li>并将position:absolute分配给每个li::before ，以便对与文本的所有项目符号距离进行精细控制。

li {
  position: relative;
...
}

li::before {
...
  position: absolute;
  top: -1px;
  /* Adjust < -number | number+ > */
  left: -32px;
...

 :root { font: 400 16px/1.25 Verdana } ol { list-style-type: none; } ol li { counter-increment: step-counter; position: relative; margin: 10px 0 0 0; } ol li::before { content: counter(step-counter); display: block; position: absolute; top: -1px; /* Adjust < -number | number+ > */ left: -32px; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; background-color: rgb(0, 200, 200); color: white; font-weight: bold; font-size: 0.8rem; text-align: center; border-radius: 15px; }

 <ol> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> <li>This is the fourth item</li> <li>This is the fifth item</li> <li>This is the sixth item</li> </ol>

Answer 2

我对列表编号样式的简单解决方案：将 <li> 内的所有内容放在一个跨度中，然后将跨度设置为不同于 <li> 本身的样式。

HTML：

<ol>
<li><span>List item</span></li>
<li><span>List item</span></li>
<li><span>List item</span></li>
</ol>

CSS：

li {
  color: red;
  font-weight: bold;
}

li span {
  color: black;
  font-weight: normal;
}