有什么方法可以在有序列表中设置列表类型的样式吗？

Question

我正在使用有序列表

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

导致

有什么方法可以只更改项目符号（A、B 和 C）的样式，使它们更轻更小，而不影响列表？

Answer 1

您无法设置实际计数器本身的样式，但您可以隐藏它并将其替换为其他内容。这可以是图像、图标或伪元素。

这是一个使用 before 伪元素的示例。

ol {
  list-style: none;
  counter-reset: li;
}

li::before {
  content: counter(li, upper-alpha);
  color: #999; /* whatever you wish, here is a light grey... */
  display: inline-block;
  font-size: 10px; /* whatever you need it to be... */
  margin-right: 10px;
}

li {
  counter-increment: li;
}

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

有很多不同类型的计数器，我使用了 upper-alpha 来匹配你的帖子。

Answer 2

li {
  font-size: 10px;
  font-weight: 200;
}

li span {
  font-size: 20px;
  /* example font-size, change to your liking */
}

<ol type="A">
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Milk</span></li>
</ol>

Answer 3

您显然可以将颜色更改为适合您喜好的颜色。 JSFiddle

ol { 
  counter-reset: item;
}
ol li { 
  display: block; 
}
ol li:before {
  content: counter(item) ". ";
  counter-increment: item;
  color: red;
}

<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>