有没有办法用css获取当前目标子对象的编号？

Question

<div>
 <p>paragraph</p>
 <p>paragraph</p>
 <p>paragraph</p>
</div>

我想知道在css中我的目标是哪个孩子，这样我就可以这样做了：

div p:nth-child(n)::before{
 content: n + ' ';
}

输出结果将是

1个页面图

2分页图

3分页图

Answer 1

只需在css中使用：

:root {
  counter-reset: paragraph;
} 

p:after {
  content: counter(paragraph);
  counter-increment: paragraph;
}

Answer 2

​

:root {
  counter-reset: count;
} 

p:before {
  content: counter(count) '-';
  counter-increment: count;
}

<div>
 <p>paragraph</p>
 <p>paragraph</p>
 <p>paragraph</p>
</div>

​