如何通过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

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

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

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

这应该在现代浏览器的工作，但由于简单和传统浏览器的支持，我想你会只用一个有序列表快乐。