CSS 카운터 - 심하게 중첩 된 목록 증가

Question

여러 페이지 양식이 있고 각 페이지가 목록 항목에 포함되어 있습니다. 각 목록 항목에는 목록 항목에 질문이있는 순서 목록이 있습니다. 이러한 각 목록 항목에는 라디오 또는 체크 상자 입력 유형 중 하나를 선택하여 정렬되지 않은 목록이 있습니다.

주문한 목록의 목록 항목을 늘리려면 CSS 카운터를 가져 오려고합니다. 나는이 질문에 카운터를 증가시키고 다음 목록에 계속합니다 (H2 년대를 포함하는 목록 항목)를 얻으려고 http://jsfiddle.net/wCbvb/

<ol> 
    <li> 
     <h1>Page 1</h1> 
     <ol> 
      <li> 
       <h2>Question 1</h2> 
       <ul> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
       </ul> 
      </li> 
      <li> 
       <h2>Question 2</h2> 
       <ul> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
       </ul> 
      </li> 
     </ol> 
    </li> 
    <li> 
     <h1>Page 2</h1> 
     <ol> 
      <li> 
       <h2>Question 3</h2> 
       <ul> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
       </ul> 
      </li> 
      <li> 
       <h2>Question 4</h2> 
       <ul> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
       </ul> 
      </li> 
     </ol> 
    </li> 
    <li> 
     <h1>Page 3</h1> 
     <ol> 
      <li> 
       <h2>Question 5</h2> 
       <ul> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
       </ul> 
      </li> 
      <li> 
       <h2>Question 6</h2> 
       <ul> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
        <li>Answer</li> 
       </ul> 
      </li> 
     </ol> 
    </li> 
</ol> 

:

여기에 기본적인 예입니다. 이게 가능한지 아닌지, 고마워. 고마워. CSS 카운터를 사용하여 순수 CSS 솔루션 만 사용합니다. 감사합니다 :)

Answer 1

이 당신이 이동 : http://jsfiddle.net/S5CnU/

당신은 content, :before 및 :after와 함께 CSS counter-increment보고 counter-reset을 할 것입니다.

위 예제에서 더 이상 질문 번호를 입력하지 않아도됩니다. 이미 CSS에서 처리하고 있습니다.

.questions { 
    counter-reset: question; 
} 

.questions > li > ol > li { 
    list-style-type:none; 
} 

.questions > li > ol > li > h2:after { 
    content: counter(question); 
} 

.questions > li > ol > li > h2:before { 
    counter-increment: question; 
    content: counter(question) ":= "; 
} 

참고 : 나는 첫 번째 olquestions 클래스를했다.