Автоматическая нумерация заголовков с помощью CSS работает для всех, кроме верхнего уровня
Я пытался реализовать автоматическую нумерацию заголовков в моей вики Mindtouch, используя стандартный механизм счетчика CSS. CSS применяется к веб-сайту с расширением Stylish в Chrome.
Как ни странно, заголовки верхнего уровня (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, который я использую (вставлено прямо из Стила):
<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>
1 ответ
Я смущен. Похоже, что проблема заключалась в том, что <style> тег, который я вставил в свой CSS. Очевидно, Стильный обеспечивает это сам.
Я не могу сказать, что полностью понимаю поведение, которое было продемонстрировано, когда <style> там был тег (который также можно воссоздать в jsfiddle). Я предполагаю, что это просто HTML-парсер, заглатывающий первый элемент правила CSS, а затем восстанавливающийся для остальных.
В любом случае, это сейчас работает.