CSS-Nummerierung mit nth-Kind

Question

Ich habe eine div und in der div gibt es mehrere Tags. Ich muss sie mit CSS nummerieren. Die Anzahl der Tags kann variieren.

Mit :nth-child() und ::before ich so etwas wie diese

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>

tun können, wenn es große Menge von Elementen ist, wie ich es umsetzen kann. Gibt es einen Weg zur Kinderzahl in css innerhalb :nth-child(), so etwas ähnliches.

wobei n die untergeordnete Nummer ist. Ich weiß Nummerierung kann mit der Liste getan werden, aber ich muss wissen, gibt es eine Möglichkeit, Kind-Nummer in der CSS-Selektor zu bekommen.

Answer 1

können Sie CSS counters verwenden, indem ::before (:before für IE8) mit und 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>