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

114

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

Як би ви вказали початковий номер за допомогою CSS?

html css html-lists

— vrish88
джерело

147

Якщо вам потрібна функціональність, щоб запустити упорядкований список (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: top-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

— hcmcf
джерело

1

Чудова відповідь. Це було рятівником життя, дякую.

— Андреа

9

Як запропонували інші, можна використовувати 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>

Розгорніть фрагмент

— Андрій
джерело

1

Починаючи нумерацію впорядкованого списку на число, яке відрізняється від значення за замовчуванням ("1"), потрібен startатрибут. Цей атрибут був дозволений (не застарілий) у специфікації HTML 4.01 (HTML 4.01 ще не був "заміненою специфікацією" під час опублікування цього запитання) та все ще дозволений у поточній специфікації HTML 5.2 . olЕлемент також мав додатковий startатрибут в XHTML 1.0 DTD в перехідному , але не в XHTML 1.0 в строгому DTD (пошук рядка 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>, ні @значення елемента списку <li> не можуть бути встановлені через CSS. Дивіться https://www.w3schools.com/css/css_list.asp

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

За допомогою чистого JavaScript можна встановити @ значення для кожного елемента списку, але це, звичайно, повільніше, ніж 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
джерело