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

Я пытаюсь сделать что-то, что было очень просто, прежде чем атрибут start в тегах ol был устарел. Я просто хотел бы иметь пару упорядоченных списков на моей странице, но начинаю нумерацию второго списка, в котором первый закончен. Что-то вроде:

1. do stuff
2. do stuff

Here a paragraph

3. do stuff

Я видел, что свойства CSS counter-reset и counter-increment должны быть в состоянии достичь этого, но я не могу заставить его работать. Вот мой код:

<html>
<head>
  <style type="text/css">
    ol li { counter-increment: mycounter; }
    ol.start { counter-reset: mycounter; }
    ol.continue { counter-reset: mycounter 2; }
  </style>
</head>

<body>
  <ol class="start">
    <li>You can't touch this</li>
    <li>You can't touch this</li>
  </ol>
  <p>STOP! Hammer time.</p>
  <ol class="continue">
    <li>You can't touch this</li>
  </ol>
</body>
</html>

Если честно, даже если бы это сработало, это было бы не идеально. Я не хочу указывать число, достигнутое первым списком в селекторе ol.continue.

Что я делаю неправильно? Какая минимальная комбинация HTML/CSS необходима для достижения желаемого эффекта?

Спасибо заранее...:)

Решение, которое я наконец принял
Вот код HTML и CSS, который я наконец использовал. Спасибо Феликсу за то, что вы меня туда. Следует также упомянуть, что Ли предлагает интересную альтернативу jQuery.

<html>
<head>
  <style type="text/css">
    ol.split { list-style-type: none; }
    ol.split li:before
    {
      counter-increment: mycounter;
      content: counter(mycounter) ".\00A0\00A0";
    }
    ol.split li
    {
      text-indent: -1.3em;
    }
    ol.start { counter-reset: mycounter; }
  </style>
</head>

<body>
  <ol class="split start">
    <li>You can't touch this</li>
    <li>You can't touch this</li>
  </ol>
  <p>STOP! Hammer time.</p>
  <ol class="split">
    <li>You can't touch this</li>
  </ol>
</body>
</html>

Предостережение: выясняется, что это "решение" не работает в представлении совместимости IE8 (и, возможно, с другими версиями/браузерами). Если это тебя не беспокоит, отлично.:)

Ответы

Ответ 1

Как уже говорилось, вам нужны :before и content, но вам также необходимо отключить нумерацию списка по умолчанию. Это ваш фиксированный CSS:

ol.start { 
    counter-reset: mycounter; 
}
ol.start li, ol.continue li {
    list-style: none;
}
ol.start li:before, ol.continue li:before { 
    content: counter(mycounter) ". "; 
    counter-increment: mycounter;
}

Вам не нужно reset счетчик для ol.continue, просто продолжайте использовать свой настраиваемый счетчик. Вышеприведенный код гарантирует, что счетчик используется только для списков ol.start и ol.continue.

Ответ 2

Извините за некроз этой темы, но он поднялся высоко, когда я столкнулся с этой проблемой. Гораздо проще решить проблему OP:

<ol start="X">

Где X - это значение списка, которое вы хотите продолжить, поэтому в его примере:

<ol>
    <li>You can't touch this</li>
    <li>You can't touch this</li>
</ol>
  <p>STOP! Hammer time.</p>
<ol start="3">
    <li>You can't touch this</li>
</ol>

Ответ 3

Начальный атрибут действителен в html5. Я бы просто использовал это.

http://w3c.github.io/html/grouping-content.html#the-ol-element

Также http://dev.w3.org/html5/spec/Overview.html#the-ol-element утверждает, что он по-прежнему поддерживается во всех браузерах. Вы должны проверить, чтобы быть уверенным, я думаю.

некоторые jquery для динамического задания начального атрибута, если вы увлекаетесь такими вещами..

  // assuming all your ol have the class mylist
  $(function(){
    var counter=1;
    $('ol.mylist').each(function(){
      $this = $(this);
      $this.attr('start',counter);
      counter += $(this).find('li').length;
    });
  });

Ответ 4

В Opera DevNet есть хороший пример для этого варианта использования: http://devfiles.myopera.com/articles/501/counters-start-example.html (который является частью их статья о счетчиках)

Итак, ваш код должен выглядеть примерно так:

<html>
<head>
  <style type="text/css">
    ol li { counter-increment: mycounter; }
    ol.start { counter-reset: mycounter; }
    ol.continue { /*counter-reset: mycounter 2; */}
    ol li { 
        counter-increment: mycounter;
        list-style-type: none;
    }
    ol li:before { content: counter(mycounter) ". "; }
  </style>
</head>

<body>
  <ol class="start">
    <li>You can't touch this</li>
    <li>You can't touch this</li>
  </ol>
  <p>STOP! Hammer time.</p>
  <ol class="continue">
    <li>You can't touch this</li>
  </ol>
</body>
</html>

Но, как заметил Ли, ol @start больше не устарел, я лично предпочел бы этот подход, поскольку это не только стиль, но и проблема семантики в вашей разметке.

Ответ 5

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

см. здесь: http://www.w3schools.com/css/pr_gen_counter-reset.asp

Ответ 6

Вот другая версия ответа, которую разработал OP. Это приводит к выравниванию текста, если у вас более 9 элементов списка. Шаблон можно расширить до более чем 99 элементов, более 999 элементов и т.д.

ol.split { list-style-type: none; }
ol.split li.less-than-ten:before {
    counter-increment: mycounter;
    content: counter(mycounter) ".\00A0\00A0\00A0\00A0";
}

ol.split li.ten-or-greater:before {
    counter-increment: mycounter;
    content: counter(mycounter) ".\00A0\00A0";
}
ol.split li {
    display: list-item;
    text-indent: -2em;
}

ol.start { counter-reset: mycounter; }

Чтобы использовать это, поместите классы "start" и "split" на первый ol. Поместите класс "split" на последующий ol, который вы хотите включить в непрерывную нумерацию. На 1-ом и 9-м символах li поместите класс "менее десяти". На 10-й по 99-й ли теги введите класс "десять-или-больше". Если вы хотите применить шаблон к меткам от 100 до 999 символов, вам нужно создать что-то вроде этого:

ol.split li.more-than-99:before {
    counter-increment: mycounter;
    content: counter(mycounter) ".\00A0\00A0\00A0\00A0\00A0\00A0";
}

Я считаю, что тегов 6 "\ 00A0" будет достаточно. Возможно, вам придется возиться с количеством тегов "\ 00A0" и номером текстового отступа, чтобы сделать все текстовые строки вверх.

Ответ 7

Есть другой подход, с которым я столкнулся, пытаясь ответить на свой вопрос (Удалить отступ для элемента в упорядоченном списке & lt; ol & gt;).

Я должен отметить, что обсуждение здесь помогло мне ответить на мой вопрос там, хотя они - разные вопросы, у них есть подобные ответы; Итак, спасибо тем, кто внес вклад в обсуждение в этой теме за вашу помощь.

Мое решение, вместо того чтобы приписывать классы частям списка HTML, приписывает класс элементу, который разбивает элементы <ol> на две части. Я использовал имя класса mid-ol. Комбинация ol + .mid-ol + ol может затем использоваться в CSS.

Для меня это было более удовлетворительным, чем изменение характера элементов <ol>, поскольку список может существовать и сохраняться, несмотря на разрыв элемента. Например, разрушающий элемент может быть перемещен, удален и т.д., Но тогда для <ol> не требуется особого обслуживания.

Чтобы не дублировать обсуждение в двух местах, я позволю всем заинтересованным лицам просмотреть обсуждение и пример кода в другой ветке.

Ответ 8

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

  <ol>
    <li>You can't touch this</li>
    <li>You can't touch this
      <p>STOP! Hammer time.</p>
      </li>
    <li>You can't touch this</li>
  </ol>