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 start
atrybutu)
Jak określiłbyś numer początkowy w CSS?
html
css
html-lists
vrish88
źródło
źródło
<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.źródło
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-reset
icounter-increment
.Problem
Powiedz, że chciałeś czegoś takiego:
Możesz ustawić
start="3"
na trzeciąli
część sekundyol
, 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.
Każdy li pokaże licznik
Teraz musimy tylko upewnić się, że licznik resetuje się tylko na pierwszym,
ol
a nie na każdym.Próbny
http://codepen.io/ajkochanowicz/pen/mJeNwY
Teraz mogę dodać dowolną liczbę pozycji do dowolnej listy, a numeracja zostanie zachowana.
źródło
ol li {...}
powinno byćol li:before {...}
- w przeciwnym razie jest to idealne rozwiązanie, dziękuję!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-increment
właściwości w następujący sposób:counter-increment
wydaje się być indeksowany 0, więc aby uzyskać listę zaczynającą się od 4, użyj3
.Dla następującego HTML
Mój wynik jest
Sprawdź moje skrzypce
Zobacz także odniesienie do wiki W3
źródło
Jak sugerowali inni, można użyć
start
atrybutuol
elementu.Alternatywnie można użyć
value
atrybutuli
elementu. Oba atrybuty są oznaczone jako przestarzałe w HTML 4.01 , ale nie w HTML 5 (ol
ili
).źródło
Rozpoczęcie numeracji uporządkowanej listy od numeru różniącego się od wartości domyślnej („1”) wymaga
start
atrybutu. 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 .ol
Elementem miał także opcjonalnystart
atrybut w XHTML 1.0 DTD jest przejściowy ale nie w XHTML 1.0 w ścisłym DTD (szukaj napisuATTLIST ol
i sprawdź listę atrybutów). Tak więc pomimo tego, co mówią niektóre ze starszych komentarzy,start
atrybut nie został wycofany ; raczej był nieważnyw ścisłych DTD HTML 4.01 i XHTML 1.0. Wbrew temu, co twierdzi jeden z komentarzy,start
atrybut nie jest dozwolony wul
elemencie 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.000
zostanie zinterpretowany jako10
; to samo dotyczy10,000
. Więc nie używaj następującego typucounter
wartości: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):
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 czegocounter
wartości mogą zostać utracone.counter
Należ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).źródło
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.
źródło
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
źródło
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.
źródło