css - 有没有办法使有序列表中的数字变为粗体？

Question

是否有任何 CSS 选择器可以仅将某些样式附加到有序列表的数字部分？

我有这样的 HTML:

<ol>
   <li>a</li>
   <li>b</li>
   <li>c</li>
</ol>

应该输出:

1.a
2.b
3.c

我需要将 1.、2. 和 3.加粗，同时让 a、b 和 c 保持常规。

我知道 <span>解决方法...

Answer 1

使用 Counter-increment CSS 属性

ol {
  margin:0 0 1.5em;
  padding:0;
  counter-reset:item;
}
 
ol>li {
  margin:0;
  padding:0 0 0 2em;
  text-indent:-2em;
  list-style-type:none;
  counter-increment:item;
}
 
ol>li:before {
  display:inline-block;
  width:1.5em;
  padding-right:0.5em;
  font-weight:bold;
  text-align:right;
  content:counter(item) ".";
}

<ol>
   <li>a</li>
   <li>b</li>
   <li>c</li>
</ol>