Question

我一直在尝试使用标准的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>

最后，这里是来自示例维基页面的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>

Answer 1

Oof，我很尴尬。似乎问题是我放入CSS的封闭<style>标记。时尚显然是时尚的。

我不能说我完全理解<style>标签存在时所展示的行为（也可以在jsfiddle中重新创建）。我想这只是HTML解析器在第一个CSS规则元素上呕吐然后恢复其余部分。

无论如何，它现在正在运作。

使用CSS的标题自动编号适用于除顶级之外的所有人

1 个答案: