css带有彩色括号的有序列表

Question

如何为有序列表中的增量器周围的括号设置不同的颜色。或者如何为增量器设置另一种颜色？ 有关详细信息，请访问jsfidlle链接。 https://jsfiddle.net/bnk2saqe/

ol { list-style: none; padding-left: 2em; text-indent: -2em;}

.simple-footnotes-list li::first-letter {
  color: blue;
}

ol .simple-footnotes-list li::nth-child(3) {
  color: blue;
}

.simple-footnotes-list li:before {
  content: "[" counter(section, decimal) "]";
  color:#FF4500;
  font-weight: bold; 
}

li { counter-increment: section;}

Answer 1

这有效：

.simple-footnotes-list li:before {
    content: "[" counter(section, decimal) "]";
    font-weight: bold; 
}
.simple-footnotes-list li:nth-child(1):before {
    color:#FF4500;
}
.simple-footnotes-list li:nth-child(2):before {
    color:#45FF00;
}

您也可以使用nth-child（xn）来循环颜色。

Fiddle