1

標準の CSS カウンター メカニズムを使用して、Mindtouch wiki に見出しの自動番号付けを実装しようとしています。CSS は、Chrome のスタイリッシュな拡張機能を使用して Web サイトに適用されています。

奇妙なことに、トップレベルの見出し (私の場合は 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

うーん、恥ずかしい。問題は、CSS に挿入した囲み<style>タグにあったようです。明らかにスタイリッシュはそれ自体を提供しています。

タグがあったときに示された動作を完全に理解しているとは言えません<style>(jsfiddle でも再現できます)。HTML パーサーが最初の CSS ルール要素をギャグして、残りを回復しているだけだと思います。

いずれにせよ、それは今働いています。

于 2012-10-18T21:49:29.780 に答える