ol 项目符号类型和文本 css [重复]答案

【问题标题】：ol bullet types and text css [duplicate]ol 项目符号类型和文本 css [重复]
【发布时间】：2018-11-24 10:09:47
【问题描述】：

我有这个 css 的 ol：

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

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

<li>Some Text</li>

如果我这样做：

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

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

感谢您的建议 :)

【问题讨论】：

li {color:blue}?
您所链接的问题是针对 ul....
您还没有真正解释您想要的结果是什么，也没有回复我的评论 - 如果您只想更改文本颜色而不是罗马数字，那么没有其他方法而不是将文本包装在另一个元素中
谢谢你，这就是我正在寻找的答案。
如果是普通数字而不是罗马数字，您可以使用伪元素和 css 计数器

标签： html css html-lists

【解决方案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>

【讨论】：

@AviE.Koenig - 欢迎朋友 :)

【解决方案2】：

是的，您可以使用各种伪选择器来专门针对不同的 LI，例如，基于数字顺序、顺序规则，或者特别是它们是第一个还是最后一个。

// Target the 2nd list item
ol li:nth-child(2) {
color: blue;
}

// Target every 3rd item and the 1st item
ol li:nth-child(3n+1) {
color: blue;
}

// Target only the first list item
ol li:first-child {
color: green;
}

// Target only the last list item
ol li:last-child {
color: purple;
}

【讨论】：