Есть ли способ изменить начальные номера в многоуровневом списке после того, как уже изменили начальный номер для сегмента списка? - PullRequest
Новая
       11

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

0 голосов
/ 22 марта 2019

В настоящее время я работаю над проектом по преобразованию некоторых учебных материалов из одной системы электронного обучения в другую, и я пытаюсь сохранить оригинальное форматирование там, где это возможно (особенно когда списки объединяются в изображения), и это включает сбор некоторые команды HTML / CSS, чтобы помочь воссоздать форматирование (я веду заметки для моих коллег о функциях, которые я использую, чтобы они также могли их понять).

В текущем уроке список инструкций, с которыми я работаю, распространяется на несколько «карточек». Я в основном смог сделать эту работу, но у текущей карты есть графическая привязка, из-за которой у меня возникают некоторые трудности.

Что я пытаюсь сделать на этой карте: 

4. Instruction item 4
5. Instruction item 5
    5.1 Sub-instruction 1
    5.2 Sub-instruction 2
    5.3 Sub-instruction 3

Graphic referenced by above

6. Instruction item 6

и т.д.

Текущие фрагменты кода, которые я нахожу, не совсем достигают этого результата.

Я проводил исследования в Интернете (в том числе здесь), и я нахожу информацию, которая помогает мне добраться до форматирования XY, и информацию, которая дает мне изменяющуюся начальную точку, но не способы использовать оба в контексте нескольких список уровней.

Я почти могу сделать это, используя приведенный ниже фрагмент кода: 

<style>
OL { counter-reset: item 3 }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
</style>
<ol>
  <li><strong>Instruction 4</strong></li>
  <li><strong>Instruction 5:</strong></li><strong>
      <ol>
        <li>Sub-item 1</li>
        <li>Sub-item 2</li>
        <li>Sub-item 3</li>
      </ol>

</strong></ol>

Вместо: 4. Инструкция № 4 5. Инструкция 5 5.1 Подпункт 1 5.2 Подраздел 2 5.3 Подпункт 3

приведенный выше фрагмент кода в настоящее время дает мне: 

4 Item 4
5 Item 5
    5.4 Sub Item 1
    5.5 Sub Item 2
    5.6 Sub Item 3

Если я заменю «counter-reset: item» на «counter-reset: item 3», я получу: 

1. Instruction item 4
2. Instruction item 5
    2.1 Sub-instruction 1
    2.2 Sub-instruction 2
    2.3 Sub-instruction 3

Нажмите, чтобы толкнуть. Я мог бы использовать отдельные строки текста и соответствующий отступ строки, чтобы получить желаемый эффект (или попытаться изменить графику), но в идеале я хотел бы найти способ получить список для автоматического форматирования соответственно, чтобы мы могли использовать это для будущих уроков. Буду очень признателен за любую помощь, с которой я пойду неправильно.

Ответы [ 2 ]

0 голосов
/ 22 марта 2019

Прежде всего, вы должны иметь вложенные ol в li .
Единственные разрешенные дочерние элементы ol : li.

Теперь посмотрим, что вы можете сделать со вторым счетчиком: 

ol { counter-reset: item 3}
li { display: block }
ol > li:before { 
  content: counters(item, "") " "; 
  counter-increment: item 
}
ol ol {
  counter-reset: tata 0;   /* Second counter */
}
ol ol li:before { 
  content: counters(item, "") "." counters(tata, "") " "; 
  counter-increment: tata;
}
<ol>
  <li><strong>Instruction 1</strong></li>
  <li>
    <strong>Instruction 2:</strong> 
    <strong>
      <ol>
        <li>Sub-item 1</li>
        <li>Sub-item 2</li>
        <li>Sub-item 3</li>
      </ol>
    </strong>  
  </li>
</ol>
0 голосов
/ 22 марта 2019

Счетчики приводят в замешательство, но я разобрался с вами:

CSS 

body {
  counter-reset: section;
}
ol {
  counter-reset: section +3;
  list-style-type: none;
}
li.heading::before {
  counter-increment: section;
  content: counter(section) '. ';
}
ol.sub-heading-wrapper {
  counter-reset: subheading;
}
li.sub-heading::before {
  counter-increment: subheading;
  content: counter(section) "." counter(subheading) " ";
}

HTML 

<ol>
  <li class="heading"><strong>Instruction 4</strong></li>
  <li class="heading"><strong>Instruction 5:</strong>
    <ol class="sub-heading-wrapper">
      <li class="sub-heading">Sub-item 1</li>
      <li class="sub-heading">Sub-item 2</li>
      <li class="sub-heading">Sub-item 3</li>
    </ol>
  </li>
  <li class="heading"><strong>Instruction 6:</strong>
    <ol class="sub-heading-wrapper">
      <li class="sub-heading">Sub-item 1</li>
      <li class="sub-heading">Sub-item 2</li>
      <li class="sub-heading">Sub-item 3</li>
    </ol>
  </li>
</ol>

По сути, я создаю два счетчика,Один сбрасывается в верхней части HTML-страницы.Второй сбрасывается для каждого класса «sub-heading-wrapper».Затем они просто увеличиваются и соответственно сжимаются вместе.

...