使用css的序列号

Question

我正在尝试使用css来自动显示序列号。

我正在尝试：

p:nth-of-type(n):after
{
    content: n;
}

如this example所示，我希望p标签显示1,2,3,4，这样如果使用js添加或删除<p>，它将自动重新排序。

Answer 1

您可以使用CSS counter功能：

<div class="pCounted">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

div.pCounted
{
    counter-reset:paragraph;
}
div.pCounted p:after, /* CSS2 syntax */
div.pCounted p::after /* CSS3 syntax */
{
    counter-increment:paragraph;
    content: counter(paragraph);
}

Online demo

此功能为well supported。