html - 订单列表的CSS设计

Question

我有这样的 HTML 和 CSS，我想对其进行设计。

CSS:

ol li {list-style-type: decimal-leading-zero;}

HTML:

<ol>
<li>One</li>
<li>Two</li>
<li>Three
<ol>
<li>Three.One</li>
<li>Three.Two</li>
</ol>
</li>
<li>Four</li>
</ol>

上面是我的 HTML 和 CSS 内容。如您所见，我不想在此订单列表中使用任何 span 元素或 anchor 标记。那么，我可以为li的OL(order list)编号和文本内容制作不同的颜色吗？我想为数字制作红色，为 li 内容制作黑色。

Answer 1

这是 solution .

ol li {
  list-style-type: decimal-leading-zero;
}

ol {
  counter-reset: li;
}

ol li {
  list-style-type: none;
  counter-increment: li;
  position: relative;
}

ol li:before {
  content: counter(li, decimal-leading-zero) ".";
  position: absolute;
  left: -2.6em;
  width: 2em;
  text-align: right;
  color: #f00;
}

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three
    <ol>
      <li>Three.One</li>
      <li>Three.Two</li>
    </ol>
  </li>
  <li>Four</li>
</ol>

希望这对您有所帮助。