it-swarm.com.ru

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

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

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

100
vrish88

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

<!doctype html>

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

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

131
Travis

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

63
Ms2ger

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
...
27
Adam Grant

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

8
Andrey

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

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

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

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

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
LoonyNoob

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

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