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 中完成列表项编号的单独样式，而不必在每个

2. 中插入范围/样式？

Answer 1

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

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

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>