使用nth-child进行CSS编号

Question

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

使用:nth-child()和::before我可以做这样的事情

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.

Answer 1

您可以使用CSS计数器使用::before(:before用于IE8)和counter-reset/increment

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>