Увеличивает уровень счетчика CSS

HTML

<ol>
 <li>item1
 <ol>
 <li>item2</li>
 </ol>
 </li>
 <li>item1
 <ol>
 <li>item2</li>
 <li>item3</li>
 </ol>
 </li>
</ol>

SCSS

ol {
 counter-reset: item;
 li {
 display: block
 }
 li:before {
 content: counters(item, ".") ". ";
 counter-increment: item
 }
}

Теперь список упорядочен следующим образом:

  • item1

1,1. элемент2

  1. item1

2,1. элемент2

2,2. элемент3

Есть ли способ, которым я могу увеличить порядок на одном уровне в начале списка? Второй

    начнется с 2: 2.1. элемент1

    1,1. элемент1

    1.1.1. элемент2

    1,2. элемент1

    1.2.1. элемент2

    1.2.2. элемент3

    ------- второй ol в одном и том же родителе ---------

    2,1. элемент1

    2.1.1. элемент2

    2,2. элемент1

    2.2.1. элемент2

    2.2.2. элемент3

    Перо здесь: http://codepen.io/simPod/pen/wawOLd

3 ответа

Вы можете настроить дополнительный счетчик и обновить его только во внешних списках (которые можно выбрать с помощью body > ol)

Обновлено Codepen


вы можете попробовать свойство counter- reset (http://www.w3schools.com/cssref/pr_gen_counter-reset.asp)

вы бы объявили: counter-reset: section; на входящем элементе, а затем:

ol li { counter-reset: subsection; }
ol li:before {
 counter-increment: section;
 content: counter(section) ".";
}
ol li ol li { counter-reset: subsection; }
ol li ol li:before {
 counter-increment: subsection;
 content: counter(section) "." counter(subsection) ".";
}
etc...


Не уверен, что это полезно, но; просто это удалось с помощью CSS. Необходимо указать начальное значение в CSS, чтобы оно не сработало для вас.

И CSS:

body ol { 
 list-style-type: none;
 counter-reset: level1 50;
 }
 ol li:before {
 content: counter(level1) ". ";
 counter-increment: level1;
 }
 ol li ol {
 list-style-type: none;
 counter-reset: level2;
 }
 ol li ol li:before {
 content: counter(level1) "." counter(level2) " ";
 counter-increment: level2;
 }

В этом случае вы получите:

50 Предмет

50.1 Подпункт

licensed under cc by-sa 3.0 with attribution.