CSS-счетчики - добавление глубоко вложенных списков

Question

У меня есть многостраничная форма, и каждая страница содержится в элементе списка. Каждый из этих элементов списка содержит упорядоченный список с вопросами в его элементах списка. Каждый из этих элементов списка содержит неупорядоченный список с выбором типов радио или флажков.

Я пытаюсь увеличить счетчики CSS для элементов списка упорядоченных списков.

Вот простой пример: 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> 

Я пытаюсь получить вопросы (элементы списка, которые содержат h2), чтобы увеличить счетчик и продолжить в следующий список. Я не уверен, что это возможно или нет, спасибо за то, что посмотрели. Я бы использовал только чистое решение CSS для этого, используя счетчики CSS. Спасибо много :)

Answer 1

Там вы идете: http://jsfiddle.net/S5CnU/

Вы хотите взглянуть на CSS counter-increment и counter-reset вместе с content, :before и :after.

В приведенном выше примере вам больше не нужно указывать тип номера вопроса, он уже обрабатывается 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) ":= "; 
} 

Примечание: Я дал свой первый ol в questions класс.