Как настроить счетчики для целевых счетчиков

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