Heading auto-numbering with CSS works for all but top-level

Question

I have been trying to implement heading auto-numbering in my Mindtouch wiki using a standard CSS counter mechanism. The CSS is being applied to the website with Stylish extension in Chrome.

Weirdly, the top-level headings (h2 in my case; h1 is reserved for the page title) are not working correctly, but everything else is. Here's the output I get on a test page:

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

I'm not sure what could cause this to happen, or even how to track it down. If anyone has a few pointers I would greatly appreciate it.

On jsfiddle the same CSS and same HTML get the desired result. (1, 2, 2.1, 2.2, 2.2.1, 2.2.2, 2.3, 3)

Here is the CSS I'm using (pasted straight from 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>

And finally, here is the HTML straight from a sample wiki page, just in case the extraneous junk makes a difference (it doesn't seem to make any difference on 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, I am embarrassed. It appears that the problem was the enclosing <style> tag I put in my CSS. Obviously Stylish is providing that itself.

I cannot say I completely understand the behavior that was demonstrated when the <style> tag was there (which can be recreated in jsfiddle as well). I guess it's just the HTML parser gagging on the first CSS rule element and then recovering for the rest.

In any case, it is now working.