Czy można podać numer startowy dla uporządkowanej listy?

115

Mam uporządkowaną listę, na której chciałbym, aby początkowa liczba wynosiła 6. Zauważyłem, że jest to obsługiwane (obecnie przestarzałe) w HTML 4.01. W tej specyfikacji mówią, że możesz określić początkową liczbę całkowitą za pomocą CSS. (zamiast startatrybutu)

Jak określiłbyś numer początkowy w CSS?

html css html-lists

— vrish88
źródło

148

Jeśli potrzebujesz funkcji, aby rozpocząć uporządkowaną listę (OL) w określonym miejscu, musisz określić swój typ dokumentu jako HTML 5; który jest:

<!doctype html>

W przypadku tego doctype można ustawić startatrybut na uporządkowanej liście. Jak na przykład:

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

Rozwiń fragment

— Travis
źródło

7

czy to nadal jest poprawne?

— antony.trupe

3

Ta odpowiedź jest poprawna przy użyciu HTML5, tak.

— Travis

Atrybut start działa również w przypadku list nieuporządkowanych (<ul>), takich jak: <ul style = "list-style-type: lower-roman;" start = "4"> i rozpocznie listę od 'iv' lub <ul style = "list-style-type: upper-alpha;" start = "4"> początek „D”

— Matthew Cox

66

<ol start="">nie jest już przestarzała w HTML5 , więc po prostu będę go używać, niezależnie od tego, co mówi HTML4.01.

— Ms2ger
źródło

32

start="number" jest do bani, ponieważ nie zmienia się automatycznie w oparciu o numerację przed nim.

Innym sposobem, aby to zrobić, który może pasować do bardziej skomplikowanych potrzeb, jest użycie counter-reseti counter-increment.

Problem

Powiedz, że chciałeś czegoś takiego:

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

Możesz ustawić start="3"na trzecią liczęść sekundy ol, ale teraz będziesz musiał to zmienić za każdym razem, gdy dodasz element do pierwszegool

Rozwiązanie

Najpierw wyczyśćmy formatowanie naszej bieżącej numeracji.

ol {
  list-style: none;
}

Każdy li pokaże licznik

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

Teraz musimy tylko upewnić się, że licznik resetuje się tylko na pierwszym, ola nie na każdym.

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

Próbny

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

Teraz mogę dodać dowolną liczbę pozycji do dowolnej listy, a numeracja zostanie zachowana.

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

Interruption from a <p> tag

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

— Adam Grant
źródło

Możesz również jawnie określić własne liczby: stackoverflow.com/a/31823704/320036

— z0r

2

ol li {...}powinno być ol li:before {...} - w przeciwnym razie jest to idealne rozwiązanie, dziękuję!

— Davor

15

Dziwię się, że nie udało mi się znaleźć odpowiedzi w tym wątku.

Znalazłem to źródło , które podsumowałem poniżej:

Aby ustawić atrybut start dla uporządkowanej listy za pomocą CSS zamiast HTML, możesz użyć counter-incrementwłaściwości w następujący sposób:

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

counter-incrementwydaje się być indeksowany 0, więc aby uzyskać listę zaczynającą się od 4, użyj 3.

Dla następującego HTML

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

Mój wynik jest

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

Sprawdź moje skrzypce

Zobacz także odniesienie do wiki W3

— hcmcf
źródło

1

Świetna odpowiedź. Dziękuję, to uratowało życie.

— Andrea

9

Jak sugerowali inni, można użyć startatrybutu olelementu.

Alternatywnie można użyć valueatrybutu lielementu. Oba atrybuty są oznaczone jako przestarzałe w HTML 4.01 , ale nie w HTML 5 ( oli li).

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

Rozwiń fragment

— Andrey
źródło

1

Rozpoczęcie numeracji uporządkowanej listy od numeru różniącego się od wartości domyślnej („1”) wymaga startatrybutu. Ten atrybut był dozwolony (nie jest przestarzały) w specyfikacji HTML 4.01 (HTML 4.01 nie był jeszcze „Specyfikacją Zastąpioną” w momencie wysłania tego pytania) i nadal jest dozwolony w obecnej specyfikacji HTML 5.2 . olElementem miał także opcjonalny startatrybut w XHTML 1.0 DTD jest przejściowy ale nie w XHTML 1.0 w ścisłym DTD (szukaj napisu ATTLIST oli sprawdź listę atrybutów). Tak więc pomimo tego, co mówią niektóre ze starszych komentarzy, startatrybut nie został wycofany ; raczej był nieważnyw ścisłych DTD HTML 4.01 i XHTML 1.0. Wbrew temu, co twierdzi jeden z komentarzy, startatrybut nie jest dozwolony w ulelemencie i obecnie nie działa w Firefoksie i Chromium.

Zwróć również uwagę, że separator tysięcy nie działa (w obecnych wersjach przeglądarek Firefox i Chromium). W poniższym fragmencie kodu 10.000zostanie zinterpretowany jako 10; to samo dotyczy 10,000. Więc nie używaj następującego typu counterwartości:

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

Więc to, czego powinieneś użyć, jest następujące (w rzadkich przypadkach, gdy w ogóle wymagane są wartości wyższe niż 1000):

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

Niektóre inne odpowiedzi sugerują użycie właściwości CSS counter, ale jest to sprzeczne z tradycyjnym rozdziałem treści i układu (odpowiednio w HTML i CSS). Użytkownicy z pewnymi wadami wzroku mogą używać własnych arkuszy stylów, w wyniku czego counterwartości mogą zostać utracone. counterNależy również przetestować obsługę czytników ekranu . Obsługa czytników ekranu dla treści w CSS jest stosunkowo nową funkcją, a zachowanie niekoniecznie jest spójne. Zobacz Czytniki ekranu i CSS: wychodzimy z mody (i do treści)? autor: John Northup na blogu WebAIM (sierpień 2017).

— Tsundoku
źródło

0

W przypadku, gdy listy są zagnieżdżone, musi istnieć procedura pomijania zagnieżdżonych elementów listy, co wykonałem, sprawdzając, czy dziadek nie jest elementem listy.

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>

Rozwiń fragment

— LoonyNoob
źródło

0

W przypadku CSS nieco trudniej jest uwzględnić przypadek, że istnieją zagnieżdżone elementy listy, dlatego tylko pierwszy poziom listy otrzymuje niestandardową numerację, która nie przerywa każdej nowej uporządkowanej listy. Używam kombinatora CSS „>” do zdefiniowania możliwych ścieżek do elementów listy, które powinny otrzymać niestandardową numerację. Zobacz 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>

Rozwiń fragment

— LoonyNoob
źródło

-1

Oczywiście ani @start uporządkowanej listy <ol>, ani @ wartość elementu listy <li> nie można ustawić za pomocą CSS. Zobacz https://www.w3schools.com/css/css_list.asp

Zastąpienie numeracji licznikiem w CSS wydaje się być najlepszym / najszybszym / niezawodnym rozwiązaniem i są inne, które to promują, np. Https://css-tricks.com/numbering-in-style/

W czystym JavaScript można ustawić @value każdego elementu listy, ale jest to oczywiście wolniejsze niż CSS. Nie jest nawet wymagane sprawdzanie, czy pozycja listy należy do uporządkowanej listy <ol>, ponieważ listy nieuporządkowane są automatycznie pomijane.

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>

Rozwiń fragment

— LoonyNoob
źródło