CSS를 사용한 표제 자동 번호 매기기는 최상위 수준을 제외한 모든 사용자에게 적용됩니다.

Question

표준 CSS 카운터 메커니즘을 사용하여 Mindtouch 위키에서 표제 자동 번호 매기기를 구현하려고했습니다. CSS가 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> 

그리고는, 여기에 샘플 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> 

Answer 1

나는 당혹 스럽다. 문제는 내 CSS에 넣은 <style> 태그를 둘러싸고있는 것으로 보입니다. 분명히 Stylish가 그 자체를 제공하고 있습니다.

<style> 태그가있을 때 보여준 동작을 완전히 이해한다고 말할 수는 없습니다 (jsfiddle에서도 재현 될 수 있음). 나는 첫 번째 CSS 규칙 요소에서 재갈을 물리는 HTML 구문 분석기 일 뿐이며 나머지는 복구한다고 생각한다.

어쨌든 이제 작동 중입니다.