css - 我们可以在不改变整个 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;
}

...因为级联规则仍然适用于此。不过请注意，nth-child IE8 不支持。