html – 使用nth-child进行CSS编号

我有一个div,在div里面有多个p标签.我需要使用css对它们进行编号. p标签的数量可能会有所不同.

使用：nth-​​child()和::之后我可以做这样的事情

div p:first-child::before {
  content: '1 '
}
div p:nth-child(2)::before {
  content: '2 '
}
div p:nth-child(3)::before {
  content: '3 '
}
div p:nth-child(4)::before {
  content: '4 '
}
div p:nth-child(5)::before {
  content: '5 '
}

<div>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
</div>

如果有大量元素,我该如何实现它.在css里面有没有任何关于子编号的方法：nth-​​child(),这样的东西.

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

其中n是子编号.我知道编号可以使用list完成,但我需要知道是否有任何方法可以在css选择器中获取子num.

解决方法

您可以使用:: before(：IE8之前)和counter-reset / increment来使用 CSS counters

div {
  counter-reset: number;
}
p {
  counter-increment: number;
}
p::before {
  content: counter(number)" ";
}

<div>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
</div>