OL-LI 数字的样式与 LI 文本不同

Question

我需要以不同于

1. 文本本身的方式设置
   项目编号的样式。有人问过类似的问题，但我没有看到解决方案。

   例子：

   ol[lang] li:before {
     font-style: normal !important
   }
   
   * [lang] {
     font-style: italic
   }

   <ol lang="la">
     <li>Lorem Ipsum Dolor Sit Amet</li>
     <li>Consectetur Adipiscing Elit</li>
     <li>Aenean Porta Neque Sem</li>
   </ol>

   正如预期的那样，拉丁文本是斜体的，但列表项编号 (1,2,3)也是斜体的，这不是我需要的。 Firefox、Chrome 和 Edge 都这样渲染。

   是否可以在 CSS 中为列表项编号单独设置样式，而不必在每个

   1. 中插入跨度/样式？

Answer 1

为了使该方法真正起作用，您需要删除默认数字并使用伪元素显示自定义数字。

在下面的示例中，数字是通过 :before 伪元素上的 content 属性添加的。 CSS counters 用于相应地增加值。

ol[lang] {
  list-style: none;
}
ol[lang] li {
  counter-increment: number;
  font-style: italic;
}
ol[lang] li:before {
  content: counter(number) '. ';
  font-style: normal;
  color: #f00;
}

<ol lang="la">
  <li>Lorem Ipsum Dolor Sit Amet</li>
  <li>Consectetur Adipiscing Elit</li>
  <li>Aenean Porta Neque Sem</li>
</ol>