css - 有没有办法用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 段

标签： css

Answer 1

:root {
  counter-reset: count;
} 

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

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