css - 我们可以在不改变整个 li 的情况下对有序列表中的数字进行样式化吗？

Question

是否可以使用CSS更改 an 中数字的样式<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 不支持该功能。