1
我一直試圖在Mindtouch wiki中使用標準CSS計數器機制實現標題自動編號。在Chrome中使用「時尚」擴展功能將CSS應用於網站。使用CSS的標題自動編號適用於除頂層之外的所有其他
奇怪的是，頂級標題（在我的情況下是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>
最後，這裏是直接來自示例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>
你有沒有從右到左設置任何文本方向？ –
不是我所知道的。當然，我沒有添加任何內容，並且在維基上沒有使用左右語言。 – neilw
鏈接到實際的目標頁面。也許，CSS優先級重寫您的更改。使用http://jsfiddle.net/fUafp/中的'！important'標誌。 –