CSS div 中的标题计数器重置过于频繁

Question

我 copy-pasted 在 HTML（来自 here）

中似乎有一些自动编号 headers 的流行代码

但是如果我的标题在 div 中，这似乎会失败：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        article {counter-reset: h2}
        h2 {counter-reset: h3}
        h3 {counter-reset: h4}
        h4 {counter-reset: h5}
        h5 {counter-reset: h6}

        h2:before {counter-increment: h2; content: counter(h2) ". "; }
        h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "; }
        h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "; }
        h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "; }
        h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; }
    </style>
</head>
<body>
    <main>
        <div class="Layout">
            <div class="Layout-main">
                <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
                    <div class="post-content e-content" itemprop="articleBody">
                        <div class="container" id="notebook-container">
                            <div><div><div><h2 id="Background">Background </h2></div></div></div>
                            <div><div><div><h3 id="Enzyme-Kinetics">Enzyme Kinetics </h3></div></div></div>
                            <div><div><div><h3 id="Parameter-Inference">Parameter Inference </h3></div></div></div>
                            <div><div><div><h3 id="The-Michaelis-Menten/Briggs-Haldane-Approximation">The Michaelis-Menten/Briggs-Haldane Approximation </h3></div></div></div>
                            <div><div><div><h2 id="Exploring-the-Forward-Model">Exploring the Forward Model </h2></div></div></div>
                            <div><div><div><h3 id="A-Standard-Example">A Standard Example </h3></div></div></div>
                            <div><div><div><h3 id="Breaking-the-Michaelis-Menten/Briggs-Haldane-Assumptions:-Initial-Substrate:Enzyme-Ratio">Breaking the Michaelis-Menten/Briggs-Haldane Assumptions: Initial Substrate:Enzyme Ratio </h3></div></div></div>
                            <div><div><div><h3 id="Breaking-the-Michaelis-Menten/Briggs-Haldane-Assumptions:-Fast-Enzyme-Substrate-Complex-Kinetics">Breaking the Michaelis-Menten/Briggs-Haldane Assumptions: Fast Enzyme-Substrate Complex Kinetics </h3></div></div></div>
                            <div><div><div><h3 id="Comparing-Integrators">Comparing Integrators </h3></div></div></div>
                            <div><div><div><h2 id="Inference">Inference </h2></div></div></div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </main>
</body>
</html>

我特别好奇这适用于 h2 但不适用于 h3...

Answer 1

这种意外行为是由 .container 中的深层嵌套子标题引起的。根据 W3 spec:

Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where elements can be nested inside themselves to arbitrary depth.

您的 CSS counter implementation works as expected for the example when the <h2>-<h6> elements are adjacent siblings in the .container. After I removed all those extra <div> tags so the subheadings were adjacent siblings, the counter() 用法显示副标题的数字并正确递增。

您首先使用 counter-reset. Then you increment and insert them with counter-increment 定义您的计数器（通过重置它们）作为使用 :before 伪 class 生成的内容。 DOM 结构更新后，计数器工作正常。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        article {counter-reset: h2}
        h2 {counter-reset: h3}
        h3 {counter-reset: h4}
        h4 {counter-reset: h5}
        h5 {counter-reset: h6}

        h2:before {counter-increment: h2; content: counter(h2) ". "; }
        h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "; }
        h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "; }
        h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "; }
        h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; }
    </style>
</head>
<body>
    <main>
        <div class="Layout">
            <div class="Layout-main">
                <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
                    <div class="post-content e-content" itemprop="articleBody">
                        <div class="container" id="notebook-container">
                            <h2 id="Background">Background</h2>
                            <h3 id="Enzyme-Kinetics">Enzyme Kinetics </h3>
                            <h3 id="Parameter-Inference">Parameter Inference </h3>
                            <h3 id="The-Michaelis-Menten/Briggs-Haldane-Approximation">The Michaelis-Menten/Briggs-Haldane Approximation </h3>
                            <h2 id="Exploring-the-Forward-Model">Exploring the Forward Model </h2>
                            <h3 id="A-Standard-Example">A Standard Example </h3>
                            <h3 id="Breaking-the-Michaelis-Menten/Briggs-Haldane-Assumptions:-Initial-Substrate:Enzyme-Ratio">Breaking the Michaelis-Menten/Briggs-Haldane Assumptions: Initial Substrate:Enzyme Ratio </h3>
                            <h3 id="Breaking-the-Michaelis-Menten/Briggs-Haldane-Assumptions:-Fast-Enzyme-Substrate-Complex-Kinetics">Breaking the Michaelis-Menten/Briggs-Haldane Assumptions: Fast Enzyme-Substrate Complex Kinetics </h3>
                            <h3 id="Comparing-Integrators">Comparing Integrators </h3>
                            <h2 id="Inference">Inference </h2>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </main>
</body>
</html>

CSS div 中的标题计数器重置过于频繁

CSS counters for headings in divs resetting too often

css

css-counter

示例：