如何为目标计数器设置计数器 [英] How to setup counters for target-counters

问题描述

在分页媒体中，CSS属性

In paged media, the CSS property target-counters can be used to include multiple counters. The spec gives the following example (simplified):

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

应该会输出类似(see section 1.3.5)的内容.

that should output something like (see section 1.3.5).

我将如何设置section计数器?

推荐答案

从生成内容模块(也适用于非分页内容):

From the Generated Content Module (for non-paged content, too):

从某种意义上说，计数器是自我嵌套"的 子元素会自动创建计数器的新实例.

Counters are "self-nesting", in the sense that re-using a counter in a child element automatically creates a new instance of the counter.

因此，您只需编写

<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>所示).

There is no way to use nested counters if your element tree is flat (as in <h1>Root</h1><h2>Sub</h2>).

这篇关于如何为目标计数器设置计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！