我们可以在不改变整个li的情况下将有序列表中的数字设置为样式吗？

Question

是否可以使用CSS在<ol>不更改整个文本的<li>情况下更改数字的样式而不在li内容周围添加额外的标记？

Answer 1

您可以禁用原始<ol>样式,然后使用:before带计数器的选择器添加您想要的任何样式.喜欢这里:

ol {
    counter-reset: i 0;
}
ol li:before {
    content: counter(i);    
    counter-increment: i;
    padding-right: 0.5em;
    color: red;
}

如果您愿意,您甚至可以使用nth-child选择器(JS Fiddle)覆盖列表中特定元素的某些样式:

ol li:nth-child(3):before {
    color: violet;
}

......因为这里仍然适用级联规则.但请注意,nth-childIE8不支持.