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

Question

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

Answer 1

您可以禁用原始<ol>样式，然后使用带有计数器的:before选择器添加您想要的任何样式。像here：

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;
}

...因为这里仍然适用级联规则。但请注意，IE8不支持nth-child。