Question

我需要设计样式＆lt; ol＆gt;商品编号与＆lt; ol＆gt;＆lt; li＆gt;不同文本本身。有类似问题的问题，但我没有看到解决方案。

示例：

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＆amp;边缘都像这样呈现。

可以在CSS中单独设置列表项目编号的样式而无需在每个＆lt; li＆gt;中插入范围/样式吗？

Answer 1

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

在下面的示例中，通过content伪元素上的:before属性添加了数字。 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>

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

1 个答案: