1

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

1 回答 1

1

呵呵，我尴尬了。看来问题出<style>在我放在 CSS 中的封闭标签上。显然，Stylish 本身就提供了这一点。

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

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

于 2012-10-18T21:49:29.780 回答