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

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

105 голосов
/ 23 апреля 2009

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

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

Ответы [ 9 ]

135 голосов
/ 23 апреля 2009

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

<!doctype html>

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

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>
64 голосов
/ 25 апреля 2009

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

27 голосов
/ 07 мая 2015

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
...
9 голосов
/ 25 июля 2017

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

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

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

8 голосов
/ 16 февраля 2016

Как и предполагали другие, можно использовать атрибут 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>
0 голосов
/ 05 февраля 2019

С помощью 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>
0 голосов
/ 05 февраля 2019

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

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>
0 голосов
/ 05 февраля 2019

Очевидно, что ни @start упорядоченного списка

  1. не могут быть установлены с помощью CSS. Смотри https://www.w3schools.com/css/css_list.asp

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

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

0 голосов
/ 11 декабря 2018

Для нумерации упорядоченного списка с номера, отличного от значения по умолчанию («1»), требуется атрибут start. Этот атрибут был разрешен (не устарел) в спецификации HTML 4.01 (HTML 4.01 еще не был «Замененной спецификацией» на момент публикации этого вопроса) и по-прежнему разрешен в текущей HTML 5.2 спецификация . Элемент ol также имеет необязательный атрибут start в переходном DTD XHTML 1.0 *, но не в строгом DTD XHTML 1.0 * (1011 *) (ищите строку 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 г.).

...