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

Question

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

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

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

我可以通过以下选择器访问这些段落:p[class^="cooking-step-"]
我想通过 CSS content 在其中的文本前面添加段落编号属性(property)。我如何实现这一点？

Answer 1

这可以使用 counters .然而，浏览器支持参差不齐，我认为 CSS3 的规范发生了变化。

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