问题描述
我复制粘贴了一些似乎很流行的代码，用于在 HTML 中自动编号标题（来自 here）
但是如果我的标题在 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...
解决方法
这种意外行为是由 .container 中嵌套很深的副标题引起的。根据{{3}}：
计数器是“自嵌套”的，从某种意义上说，重置后代元素或伪元素中的计数器会自动创建计数器的新实例。这对于像 HTML 中的列表这样的情况很重要，在这种情况下，元素可以嵌套到任意深度。
当 <h2>-<h6> 元素是 .container 中的相邻同级元素时，您的 W3 spec 实现按预期工作。在我删除所有这些额外的 <div> 标签后，子标题是相邻的同级，CSS counter 用法显示子标题的数字并正确增加它们。
您首先使用 counter() 定义您的计数器（通过重置它们）。然后，您使用 :before 伪类将它们增加并插入 counter-reset 作为生成的内容。 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>