如何通过CSS访问元素的类值

Question

如何通过CSS访问段落类字符串末尾的数字（下例中的1和2）？

<p class="cooking-step-1">
<!-- Second step ... -->
</p>

<p class="cooking-step-2">
<!-- Second step ... -->
</p>

我可以通过以下选择器访问这些段落：p[class^="cooking-step-"]
我想通过CSS content属性在其内部的文本前添加段落的编号。我如何实现这一目标？

Answer 1

使用counters即可。但是，浏览器支持很不稳定，我认为CSS3的规格发生了变化。

基本上，你甚至不需要cooking-step-N课程。如果你使用像cooking-step这样的类，你可以简单地让引擎为你做计数。在每个.cooking-step上对其进行递增，并将counter()用于content。

Answer 2

由于您正在使用set步骤并尝试对它们进行编号，因此您应该尝试使用有序列表。 ol表示项目属于给定的顺序，它提供编号而无需任何额外的工作！

如果你真的想使用CSS，那么你正在寻找计数器。在这些段落的包含元素中，应用样式counter-reset: step。然后为您的段落标签使用：

p:before {   
    counter-increment: step;   
    content: counter(step)". ";   
}  

这应该适用于现代浏览器，但由于简单和传统的浏览器支持，我认为只要有序列表你就会更开心。