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>)、ネストされたカウンターを使用する方法はありません。