css - 在没有javascript的情况下使用第n个 child 时，有没有办法访问n？

Question

比如说我有:

#with-index span::after {
    content: attr(data-n);
    position: relative;
    top: -8px;
    font-size: 9px;
    font-weight: bold;
    color: red;
}

#without-index span:nth-child(1n)::after {
    content: attr(n);
    position: relative;
    top: -8px;
    font-size: 9px;
    font-weight: bold;
    color: red;
}

<div id="without-index">
    <span>Hello</span> <span>World</span>
</div>

<div id="with-index">
    <span data-n="0">Hello</span> <span data-n="1">World</span>
</div>

如果我把索引作为一个属性，我可以使用 content: attr(data-n) 。有没有办法使用 nth-child(1n)来获取 n的值，而无需设置任何其他属性就可以达到同样的效果？

Answer 1

您可以使用这样的 CSS 计数器:

#without-index { counter-reset: number -1; }

#without-index span::after {
    content: counter(number);
    counter-increment: number;
    position: relative;
    top: -8px;
    font-size: 9px;
    font-weight: bold;
    color: red;
}

<div id="without-index">
    <span>Hello</span> <span>World</span>
</div>