问题

<div>
 <p>段落</p>
 <p>段落</p>
 <p>段落</p>
</div>

我想知道在CSS中我正在定位哪个子元素，这样我就可以做类似以下的操作：

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

输出将是：

1 段落

2 段落

3 段落

<details>
<summary>英文:</summary>

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

I would like to know which child I'm targeting in css, so there I can do something like:

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

And the output would be

1 pagragraph

2 pagragraph

3 pagragraph


</details>


# 答案1
**得分**: 0

只使用这段CSS代码：

```css
:root {
  counter-reset: paragraph;
} 

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

:root {
  counter-reset: paragraph;
} 

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

答案2

得分: 0

Sure, here is the translated content:

:root {
  counter-reset: count;
}

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

<div>
  <p>段落</p>
  <p>段落</p>
  <p>段落</p>
</div>

:root {
  counter-reset: count;
} 

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

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