我一直在尝试使用标准 CSS 计数器机制在我的 Mindtouch wiki 中实现标题自动编号。 CSS 正在应用于带有 Chrome 中的 Stylish 扩展的网站。
奇怪的是,顶级标题(在我的示例中为 h2;h1 保留用于页面标题)无法正常工作,但其他一切正常。这是我在测试页上得到的输出:
1 Heading 2
1 Heading 2
0.1 Heading 3
0.2 Heading 3
0.2.1 Heading 4
0.2.2 Heading 4
0.3 Heading 3
1 Heading 2
我不确定是什么原因导致这种情况发生,甚至不知道如何追踪它。如果有人有一些指示,我将不胜感激。
在 jsfiddle 上,相同的 CSS 和相同的 HTML 得到了想要的结果。 (1, 2, 2.1, 2.2, 2.2.1, 2.2.2, 2.3, 3)
这是我正在使用的 CSS(直接从 Stylish 粘贴):
<style>
div#pageText {
counter-reset: h2counter;
}
h2:before{
counter-increment: h2counter;
content: counter(h2counter) " ";
}
h2 { counter-reset: h3counter; }
h3:before{
counter-increment: h3counter;
content: counter(h2counter) "." counter(h3counter) " ";
}
h3 { counter-reset: h4counter; }
h4:before{
counter-increment: h4counter;
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) " ";
}
h4 { counter-reset: h5counter; }
h5:before{
counter-increment: h5counter;
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) " ";
}
</style>
最后,这是直接来自示例 wiki 页面的 HTML,以防无关的垃圾产生影响(在 jsfiddle 上似乎没有任何影响)。
<div class="pageText" id="pageText">
<div id="section_1">
<span id="Heading_2"></span>
<h2 class="editable">
<span>Heading 2</span>
<div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
</div>
</h2>
</div>
<div id="section_2">
<span id="Heading_2_2"></span>
<h2 class="editable">
<span>Heading 2</span>
<div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
</div>
</h2>
<div id="section_3">
<span id="Heading_3"></span>
<h3 class="editable">
<span>Heading 3</span>
<div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
</div>
</h3>
</div>
<div id="section_4"><span id="Heading_3_2"></span>
<h3 class="editable">
<span>Heading 3</span>
<div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
</div>
</h3>
<div id="section_5">
<span id="Heading_4"></span>
<h4 class="editable">
<span>Heading 4</span>
<div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
</div>
</h4>
</div>
<div id="section_6" class="">
<span id="Heading_4_2"></span>
<h4 class="editable">
<span>Heading 4</span>
<div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
</div>
</h4>
</div>
</div>
<div id="section_7">
<span id="Heading_3_3"></span>
<h3 class="editable">
<span>Heading 3</span>
<div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
</div>
</h3>
</div>
</div>
<div id="section_8">
<span id="Heading_2_3"></span>
<h2 class="editable">
<span>Heading 2</span>
<div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
</div>
</h2>
</div>
</div>
最佳答案
哎呀,我很尴尬。看来问题是封闭的 <style>
我放在 CSS 中的标签。显然 Stylish 自己提供了这一点。
我不能说我完全理解 <style>
时所展示的行为标签在那里(也可以在 jsfiddle 中重新创建)。我猜这只是 HTML 解析器在第一个 CSS 规则元素上阻塞,然后恢复其余部分。
无论如何,它现在正在工作。
关于css - 使用 CSS 的标题自动编号适用于除顶级之外的所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12963125/