css - 使用 css 的序列号

Question

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

我目前正在尝试:

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

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

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 .