使用CSS计数器美化数字有序列表的实现方法

使用CSS计数器可以美化数字有序列表的样式。下面是实现方法的详细攻略：

1. 创建有序列表（<ol>）元素，并为其添加一个自定义的类名，例如custom-list。

<ol class=\"custom-list\">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

1. 在CSS样式表中，使用counter-reset属性为自定义的类名设置计数器。计数器的名称可以自定义，这里我们使用custom-counter。

.custom-list {
  counter-reset: custom-counter;
}

1. 使用counter-increment属性为列表项设置计数器的增量。在这个例子中，我们将计数器的增量设置为1。

.custom-list li {
  counter-increment: custom-counter;
}

1. 使用::before伪元素为列表项添加计数器的内容。通过content属性和counter函数，将计数器的值显示在列表项前面。

.custom-list li::before {
  content: counter(custom-counter) \". \";
}

现在，数字有序列表的样式已经被美化了。以下是两个示例说明：

示例1：自定义列表项样式

<ol class=\"custom-list\">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

.custom-list {
  counter-reset: custom-counter;
}

.custom-list li {
  counter-increment: custom-counter;
}

.custom-list li::before {
  content: counter(custom-counter) \". \";
  color: red;
  font-weight: bold;
}

在这个示例中，列表项前面的数字将显示为红色，并加粗显示。

示例2：嵌套列表

<ol class=\"custom-list\">
  <li>水果
    <ol>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ol>
  </li>
  <li>蔬菜
    <ol>
      <li>胡萝卜</li>
      <li>番茄</li>
      <li>黄瓜</li>
    </ol>
  </li>
</ol>

.custom-list {
  counter-reset: custom-counter;
}

.custom-list li {
  counter-increment: custom-counter;
}

.custom-list li::before {
  content: counter(custom-counter) \". \";
}

.custom-list ol {
  counter-reset: custom-counter;
}

在这个示例中，嵌套的列表项将使用独立的计数器进行计数，而不受外部列表项的影响。