it-swarm.dev

Czy można określić numer początkowy dla uporządkowanej listy?

Mam uporządkowaną listę, na której chciałbym, aby numer początkowy był 6. Znalazłem, że był to obsługiwany (teraz przestarzały) w HTML 4.01. W tej specyfikacji mówią, że możesz określić początkową liczbę całkowitą za pomocą CSS. (zamiast atrybutu start)

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

100
vrish88

Jeśli potrzebujesz funkcjonalności do uruchomienia uporządkowanej listy (OL) w określonym punkcie, musisz określić swój typ dokumentu jako HTML 5; który jest:

<!doctype html>

W przypadku tego doctype poprawne jest ustawienie atrybutu start na uporządkowanej liście. Jak na przykład:

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

131
Travis

<ol start=""> nie jest już przestarzały w HTML5 , więc używałbym go bez względu na to, co mówi HTML4.01.

63
Ms2ger

start="number" jest do bani, ponieważ nie zmienia się automatycznie na podstawie poprzedniej numeracji.

Innym sposobem na zrobienie tego, który może być bardziej skomplikowany, jest użycie counter-reset i counter-increment.

Problem

Powiedz, że chcesz 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ą li drugiej zmiennej ol, ale teraz będziesz musiał ją zmieniać za każdym razem, gdy dodasz element do pierwszej zmiennej ol 

Rozwiązanie

Po pierwsze, wyczyść formatowanie naszej bieżącej numeracji.

ol {
  list-style: none;
}

Każdemu li pokażemy licznik

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

Teraz musimy tylko upewnić się, że licznik resetuje się tylko na pierwszej zmiennej ol zamiast na każdej.

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

Próbny

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

Teraz mogę dodać tyle elementów do listy i numeracji, które zostaną zachowane.

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

Jak sugerowali inni, można użyć atrybutu start elementu ol.

Alternatywnie można użyć atrybutu value elementu li. Oba atrybuty są oznaczone jako przestarzałe w HTML 4.01 , ale nie w HTML 5 ( ol i li ).

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

8
Andrey

Jestem zaskoczony, że nie mogłem 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żna użyć właściwości counter-increment 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-increment wydaje 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 fiddle

Zobacz także odniesienie wiki W3

6
hcmcf

Jeśli listy są zagnieżdżone, musi istnieć obsługa pomijająca zagnieżdżone elementy listy, którą wykonałem, sprawdzając, czy grand parent 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>

0
LoonyNoob

Z CSS jest trochę skomplikowane pokrycie przypadku, że istnieją zagnieżdżone elementy listy, więc tylko pierwszy poziom listy otrzymuje niestandardową numerację, która nie przerywa z każdą nową uporządkowaną listą. Używam kombinatora CSS „>”, aby zdefiniować możliwe ścieżki do elementów listy, które będą miały 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>

0
LoonyNoob

Rozpoczęcie numerowania uporządkowanej listy od liczby innej niż domyślna („1”) wymaga atrybutu start. Ten atrybut był dozwolony (nie przestarzały) w specyfikacji HTML 4.01 (HTML 4.01 nie był jeszcze „Zastąpioną specyfikacją” w momencie opublikowania tego pytania) i jest nadal dozwolony w bieżącej specyfikacji HTML 5.2 . Element ol miał również opcjonalny atrybut start w przejściowym DTD XHTML 1.0 ale nie w ścisły DTD XHTML 1.0 (wyszukaj ciąg ATTLIST ol i sprawdź listę atrybutów). Więc pomimo tego, co mówią niektóre starsze komentarze, atrybut start nie był przestarzały; raczej był to {nieprawidłowy w ścisłych DTD HTML 4.01 i XHTML 1.0. Pomimo tego, co twierdzi jeden z komentarzy, atrybut start nie jest dozwolony w elemencie ul i obecnie nie działa w Firefox i Chromium.

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

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

Tak więc powinieneś użyć następującego (w rzadkich przypadkach, gdy 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 z innych odpowiedzi sugerują użycie właściwości CSS counter, ale jest to sprzeczne z tradycyjną separacją treści i układu (odpowiednio w HTML i CSS). Użytkownicy z pewnymi wadami wzroku mogą korzystać z własnych arkuszy stylów, a wartości counter mogą w rezultacie zostać utracone. Należy również przetestować obsługę czytnika ekranu dla zmiennej counter. Obsługa czytnika ekranu dla treści w CSS jest stosunkowo nową cechą, a zachowanie niekoniecznie jest spójne. Zobacz Czytniki ekranu i CSS: Czy wychodzimy ze stylu (i do treści)? przez Johna Northupa na blogu WebAIM (sierpień 2017).

0