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

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

Как бы вы определили начальный номер с CSS?

ОТВЕТЫ

Ответ 1

Если вам нужна функциональность для запуска упорядоченного списка (OL) в определенной точке, вам нужно указать свой doctype как HTML 5; который:

<!doctype html>

С помощью этого doctype допустимо установить атрибут start в упорядоченном списке. Например:

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

Ответ 2

<ol start=""> больше не устаревает в HTML5, поэтому я буду продолжать использовать его независимо от того, что говорит HTML4.01.

Ответ 3

start="number" отстой, потому что он не изменяется автоматически на основе нумерации перед ним.

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

Проблема

Скажите, что вы хотели что-то вроде этого:

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

Вы можете установить start="3" на третьем li второго ol, но теперь вам нужно будет его менять каждый раз, когда вы добавляете элемент в первый ol

Решение

Сначала очистите форматирование нашей текущей нумерации.

ol {
  list-style: none;
}

У каждого из них будет отображаться счетчик

ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

Теперь нам просто нужно убедиться, что счетчик сбрасывается только на первом ol вместо каждого.

ol:first-of-type {
  counter-reset: mycounter;
}

Demo

http://codepen.io/ajkochanowicz/pen/mJeNwY

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

1. Item one
2. Item two
...
n. Item n

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...

Ответ 4

Как и другие, можно использовать атрибут start элемента ol.

В качестве альтернативы можно использовать атрибут value элемента li. Оба атрибута отмечены как устаревшие в HTML 4.01, но не в HTML 5 (ol и li).

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>

Ответ 5

Я удивлен, что не смог найти ответ в этой теме.

Я нашел этот источник, который я суммировал ниже:

Чтобы установить начальный атрибут для упорядоченного списка, используя CSS вместо HTML, вы можете использовать свойство counter-increment следующим образом:

ol {
  list-style: none;
  counter-increment: start 3;
  }
li:before {
  content: counter(start, lower-alpha) ") ";
  counter-increment: start;
  }

counter-increment видимому, имеет индекс 0, поэтому для получения списка, начинающегося с 4, используйте 3.

Для следующего HTML

<ol>
  <li>Buy milk</li>
  <li>Feed the dog</li>
  <li>Drink coffee</li>
</ol>

Мой результат

d) Buy milk
e) Feed the dog
f) Drink coffee

Проверьте мою скрипку

Смотрите также W3 ссылку

Ответ 6

Для нумерации упорядоченного списка с номера, отличного от значения по умолчанию ("1"), требуется атрибут start. Этот атрибут был разрешен (не рекомендуется) в спецификации HTML 4.01 (HTML 4.01 еще не был "Замененной спецификацией" на момент публикации этого вопроса) и по-прежнему разрешен в текущей спецификации HTML 5.2. Элемент ol также имел необязательный атрибут start в переходном DTD XHTML 1.0, но не в строгом DTD XHTML 1.0 (найдите строку ATTLIST ol и проверьте список атрибутов). Таким образом, несмотря на то, что говорится в некоторых старых комментариях, атрибут start не устарел; скорее это было недопустимо в строгих DTD HTML 4.01 и XHTML 1.0. Несмотря на то, что говорится в одном из комментариев, атрибут start недопустим для элемента ul и в настоящее время не работает в Firefox и Chromium.

Также обратите внимание, что разделитель тысяч не работает (в текущих версиях Firefox и Chromium). В следующем фрагменте кода 10.000 будет интерпретироваться как 10; то же самое относится и к 10,000. Поэтому не используйте следующий тип значения counter:

<ol start="10.000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Итак, что вы должны использовать, это следующее (в редких случаях, когда требуются значения выше 1000):

<ol start="10000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

В некоторых других ответах предлагается использовать counter свойств CSS, но это противоречит традиционному разделению содержимого и макета (в HTML и CSS соответственно). Пользователи с определенными нарушениями зрения могут использовать свои собственные таблицы стилей, и в результате значения counter могут быть потеряны. Также необходимо проверить поддержку считывателя экрана для counter. Поддержка программ чтения с экрана для содержимого в CSS - относительно недавняя функция, и поведение не обязательно согласовано. См. Раздел " Считыватели экрана" и "CSS": выйдем ли мы из моды (в контент)? Джон Нортуп в блоге WebAIM (август 2017 г.)

Ответ 7

В случае, если списки являются вложенными, должна быть обработка, опускающая вложенные элементы списка, что я сделал, убедившись, что родительский элемент не является элементом списка.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

Ответ 8

С CSS немного сложнее охватить случай наличия вложенных элементов списка, таким образом, только первый уровень списка получает пользовательскую нумерацию, которая не прерывается с каждым новым упорядоченным списком. Я использую CSS комбинатор '>', чтобы определить возможные пути к элементам списка, которые должны получить собственную нумерацию. Смотрите https://www.w3schools.com/css/css_combinators.asp

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

Ответ 9

Вот живой пример упорядочения списка в топ-10 Гоа

Ответ 10

Очевидно, что ни @start упорядоченного списка <ol>, ни @value элемента списка <li> не могут быть установлены с помощью CSS. Смотрите https://www.w3schools.com/css/css_list.asp

Замена нумерации счетчиком в CSS кажется лучшим/быстрым/надежным решением, и есть другие, которые продвигают его, например, https://css-tricks.com/numbering-in-style/

С чистым JavaScript можно установить @value каждого элемента списка, но это, конечно, медленнее, чем CSS. Даже не требуется проверять, принадлежит ли элемент списка к упорядоченному списку <ol>, потому что неупорядоченные списки исключаются автоматически.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
  if (list[i].parentElement.nodeName=="OL") {
    list[i].setAttribute("value",i+1);
  }
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
  <h2>Ordered Lists - numbering not interupted</h2>
  <p>This example avoid that each ordered list starts with 1:</p>

  <p><strong>1st list:</strong></p>
  <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ol>

  <p><strong>2nd list:</strong></p>
  <ol>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ol>
  </section>

</body>
</html>