有什么方法可以排序列表中的列表类型吗？

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>

有很多不同类型的计数器，我用上字母来匹配您的帖子。

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>