CSS 使用 nth-child 编号

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>

如果有大量的元素，我该如何实现。 child number in css inside :nth-child() 有什么办法吗，像这样。

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

其中 n 是 child 号码。我知道可以使用列表进行编号，但我需要知道有没有什么方法可以在 css 选择器中获取 child num。

Answer 1

您可以通过使用 ::before（:before for 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>

CSS 使用 nth-child 编号

CSS numbering using nth-child

html

css

css-selectors

pseudo-class