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

115

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

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

html css html-lists

— vrish88
источник

148

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

<!doctype html>

С этим типом документа допустимо установить startатрибут в упорядоченном списке. Такие как:

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

Развернуть фрагмент

— Трэвис
источник

7

это все еще верно?

— antony.trupe

3

Да, этот ответ точен при использовании HTML5.

— Трэвис

Атрибут start также работает для неупорядоченных (<ul>) списков, например: <ul style = "list-style-type: lower-roman;" start = "4"> и начнет список с 'iv' или <ul style = "list-style-type: upper-alpha;" start = "4"> начало на 'D'

— Мэтью Кокс,

66

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

— Ms2ger
источник

32

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;
}

Демо

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
...

— Адам Грант
источник

Вы также можете явно указать свои собственные числа: stackoverflow.com/a/31823704/320036

— z0r

2

ol li {...}должно быть ol li:before {...} - иначе это отличное решение, спасибо!

— Давор

15

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

Я нашел этот источник , который кратко изложил ниже:

Чтобы установить начальный атрибут для упорядоченного списка с использованием 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 wiki

— hcmcf
источник

1

Отличный ответ. Спасибо, это спасло вам жизнь.

— Андреа

10

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

В качестве альтернативы можно использовать valueатрибут lielement. Оба атрибута помечены как устаревшие в 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>

Развернуть фрагмент

— Андрей
источник

Мне плевать на старый html4, так что работайте со мной просто: <li value = "10">. СПАСИБО

— Бинь Нгуен

1

Для начала нумерации упорядоченного списка с номера, который отличается от значения по умолчанию («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>

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

— Цундоку
источник

0

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

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>

Развернуть фрагмент

— LoonyNoob
источник

0

С 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>

Развернуть фрагмент

— LoonyNoob
источник

-1

Очевидно, что ни @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>

Развернуть фрагмент

— LoonyNoob
источник