css - 如何为目标计数器设置计数器

Question

在分页媒体中，CSS 属性target-counters可用于包含多个计数器。该规范给出了以下示例（简化）：

a::after {
 content: "see section " target-counters(attr(href, url), section, ".")
}

那应该输出类似(see section 1.3.5).

我将如何设置section柜台？

Answer 1

从生成的内容模块（也适用于非分页内容）：

计数器是“自嵌套”的，从某种意义上说，在子元素中重新使用计数器会自动创建一个新的计数器实例。

因此，您可以只写

<style type="text/css">    
section {counter-increment: section;}
</style>

<section id="foo">
<h1>Root level</h1>
    <section id="bar">
    <h2>Sub Level</h2>
    </section>
</section>

如果您的元素树是扁平的（如 中），则无法使用嵌套计数器<h1>Root</h1><h2>Sub</h2>。