Ho un elenco ordinato in cui vorrei che il numero iniziale fosse 6. Ho scoperto che questo era supportato (ora deprecato) in HTML 4.01. In questa specifica si dice che è possibile specificare il numero intero iniziale utilizzando CSS. (invece startdell'attributo)
Come specificheresti il numero di partenza con CSS?
Risposte:
Se hai bisogno della funzionalità per avviare un elenco ordinato (OL) in un punto specifico, dovrai specificare il tuo doctype come HTML 5; che è:
<!doctype html>Con quel doctype, è valido impostare un startattributo su un elenco ordinato. Ad esempio:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>start="number" fa schifo perché non cambia automaticamente in base alla numerazione precedente.
Un altro modo per farlo che potrebbe soddisfare esigenze più complesse è usare counter-resetecounter-increment .
Problema
Di 'che volevi qualcosa di simile:
1. Item one
2. Item two
Interruption from a <p> tag
3. Item three
4. Item fourPotresti impostare start="3"il terzo lidel secondo ol, ma ora dovrai cambiarlo ogni volta che aggiungi un elemento al primool
Soluzione
Per prima cosa, cancelliamo la formattazione della nostra numerazione corrente.
ol {
list-style: none;
}Avremo ogni li a mostrare il bancone
ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}Ora dobbiamo solo assicurarci che il contatore si azzeri solo sul primo olanziché su ciascuno.
ol:first-of-type {
counter-reset: mycounter;
}dimostrazione
http://codepen.io/ajkochanowicz/pen/mJeNwY
Ora posso aggiungere tutti gli elementi a entrambi gli elenchi e la numerazione verrà preservata.
1. Item one
2. Item two
...
n. Item n
Interruption from a <p> tag
n+1. Item n+1
n+2. Item n+2
...ol li {...}dovrebbe essere ol li:before {...} - altrimenti questa è la soluzione perfetta, grazie!
Sono sorpreso di non essere riuscito a trovare la risposta in questo thread.
Ho trovato questa fonte , che ho riassunto di seguito:
Per impostare l'attributo di inizio per un elenco ordinato utilizzando CSS anziché HTML, puoi utilizzare la counter-incrementproprietà come segue:
ol {
list-style: none;
counter-increment: start 3;
}
li:before {
content: counter(start, lower-alpha) ") ";
counter-increment: start;
}counter-incrementsembra essere indicizzato 0, quindi per ottenere un elenco che inizia con 4, usa 3.
Per il seguente codice HTML
<ol>
<li>Buy milk</li>
<li>Feed the dog</li>
<li>Drink coffee</li>
</ol>Il mio risultato è
d) Buy milk
e) Feed the dog
f) Drink coffeeGuarda il mio violino
Vedi anche il riferimento wiki W3
Come altri hanno suggerito, è possibile utilizzare l' startattributo di olelemento.
In alternativa, si può usare l' valueattributo lidell'elemento. Entrambi gli attributi sono contrassegnati come deprecati in HTML 4.01 , ma non in HTML 5 ( ole li).
<ol start="-2">
<li>Alpha</li>
<li>Beta</li>
<li value="10">Gamma</li>
<li>Delta</li>
</ol>L'avvio della numerazione di un elenco ordinato con un numero diverso dal valore predefinito ("1") richiede l' startattributo. Questo attributo era consentito (non deprecato) nella specifica HTML 4.01 (HTML 4.01 non era ancora una "Specifica sostituita" al momento in cui questa domanda è stata pubblicata) ed è ancora consentito nella specifica HTML 5.2 corrente . L' olelemento aveva anche un startattributo opzionale nella DTD transizionale di XHTML 1.0 ma non nella DTD rigorosa di XHTML 1.0 (cerca la stringa ATTLIST ole controlla l'elenco degli attributi). Quindi, nonostante ciò che dicono alcuni dei commenti precedenti, l' startattributo non è stato deprecato ; piuttosto non era validonelle rigide DTD di HTML 4.01 e XHTML 1.0. Nonostante quanto affermato da uno dei commenti, l' startattributo non è consentito inul sull'elemento e attualmente non funziona in Firefox e Chromium.
Nota anche che un separatore delle migliaia non funziona (nelle versioni correnti di Firefox e Chromium). Nel seguente frammento di codice, 10.000verrà interpretato come 10; lo stesso vale per 10,000. Quindi non utilizzare il seguente tipo di countervalore:
<ol start="10.000">
<li>Item 10.000</li>
<li>Next item</li>
<li>Next item</li>
</ol>Quindi quello che dovresti usare è il seguente (nei rari casi in cui sono richiesti valori superiori a 1000):
<ol start="10000">
<li>Item 10.000</li>
<li>Next item</li>
<li>Next item</li>
</ol>Alcune delle altre risposte suggeriscono di utilizzare la proprietà CSS counter, ma ciò contrasta con la tradizionale separazione di contenuto e layout (rispettivamente in HTML e CSS). Gli utenti con determinate disabilità visive possono utilizzare i propri fogli di stile e di conseguenza i countervalori potrebbero andare persi. Anche il supporto dello screen reader counterdovrebbe essere testato. Il supporto dello screen reader per il contenuto in CSS è una funzionalità relativamente recente e il comportamento non è necessariamente coerente. Vedi Screen Reader e CSS: stiamo andando fuori moda (e nel contenuto)? di John Northup sul blog WebAIM (agosto 2017).
Nel caso in cui gli elenchi siano nidificati, deve esserci una gestione che ometta gli elementi di elenco nidificati, cosa che ho ottenuto verificando che il nonno non sia un elemento di elenco.
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>Con i CSS è un po 'complicato coprire il caso in cui ci sono elementi di elenco nidificati, quindi solo il primo livello di elenco ottiene la numerazione personalizzata che non si interrompe con ogni nuovo elenco ordinato. Sto usando il combinatore CSS '>' per definire i possibili percorsi agli elementi dell'elenco che avranno una numerazione personalizzata. Vedi 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>Ovviamente né @start di un elenco ordinato <ol> né @value di un elemento di elenco <li> possono essere impostati tramite CSS. Vedere https://www.w3schools.com/css/css_list.asp
Sostituire la numerazione con un contatore in CSS sembra essere la soluzione migliore / più veloce / infallibile e ce ne sono altri che la promuovono, ad esempio https://css-tricks.com/numbering-in-style/
Con JavaScript puro è possibile impostare @value di ogni elemento della lista, ma questo è ovviamente più lento del CSS. Non è nemmeno necessario controllare se l'elemento dell'elenco appartiene a un elenco ordinato <ol>, perché gli elenchi non ordinati vengono automaticamente esclusi.
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>