html - ol 项目符号类型和文本 css

Question

我有这个 css 的 ol：

ol {
  list-style-type: upper-roman;
  color: red;
}

我的问题是……我的 li 和其中的任何文本都是红色的。

<li>Some Text</li>

如果我做：

<li><span>Some Text</span></li>

我可以随心所欲地操纵跨度没问题，但是......有没有一种CSS方法来改变文本颜色而不包含在一个单独的元素中？

感谢您的建议:)

标签： htmlcsshtml-lists

Answer 1

您可以使用counters如下

ol {
  counter-reset: section;
  list-style: none;
}

li::before {
  color: red;
  content: counter(section, upper-roman);
  margin-right: 5px;
}

li {
  counter-increment: section;
}

<ol>
  <li>Some text</li>
  <li>Some text</li>
</ol>