CSS
contatori
Ricerca…
Sintassi
contatore: [<counter-name> <numero intero>? ] + | nessuna
counter-reset: [<counter-name> <numero intero>? ] + | nessuna
counter-increment: [<counter-name> <integer>? ] + | nessuna
counter (<counter-name> [, <counter-style>]?)
contatori (<counter-name>, <connector-string> [, <counter-style>]?)
Parametri
| Parametro | Dettagli |
|---|---|
| contro-nome | Questo è il nome del contatore che deve essere creato o incrementato o stampato. Può essere un nome personalizzato come lo desiderano gli sviluppatori. |
| numero intero | Questo intero è un valore facoltativo che, se fornito accanto al nome del contatore, rappresenterà il valore iniziale del contatore (in counter-set , proprietà di counter-reset ) o il valore con cui il contatore deve essere incrementato (in counter-increment ). |
| nessuna | Questo è il valore iniziale per tutte e 3 le proprietà counter-* . Quando questo valore viene utilizzato per il counter-increment , il valore di nessuno dei contatori è interessato. Quando viene utilizzato per gli altri due, non viene creato alcun contatore. |
| contro-style | Specifica lo stile in cui deve essere visualizzato il valore del contatore. Supporta tutti i valori supportati dalla proprietà list-style-type . Se none si utilizza none il valore del contatore non viene stampato affatto. |
| Connettore-stringa | Rappresenta la stringa che deve essere posizionata tra i valori di due diversi livelli di contatore (come "." In "2.1.1"). |
Osservazioni
I contatori non sono un nuovo argomento nei CSS. Era una parte delle Specifiche CSS Livello 2 (Revisione 1 per la precisione) e quindi ha un supporto browser molto alto.
Tutti i browser tranne IE6 e IE7 supportano i contatori CSS.
Applicando lo stile dei numeri romani all'uscita contatore
CSS
body {
counter-reset: item-counter;
}
.item {
counter-increment: item-counter;
}
.item:before {
content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}
HTML
<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>
Nell'esempio sopra, l'uscita del contatore verrà visualizzata come I, II, III (numeri romani) invece del solito 1, 2, 3 poiché lo sviluppatore ha esplicitamente specificato lo stile del contatore.
Numera ogni oggetto usando il contatore CSS
CSS
body {
counter-reset: item-counter; /* create the counter */
}
.item {
counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}
/* just for demo */
.item {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
.item-header {
border-bottom: 1px solid;
height: 40px;
line-height: 40px;
padding: 5px;
}
.item-content {
padding: 8px;
}
HTML
<div class='item'>
<div class='item-header'>Item 1 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 2 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 3 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
L'esempio numeri sopra ogni "elemento" nella pagina e aggiunge il numero del articolo prima sua intestazione (con content di proprietà di .item-header elemento di :before pseudo). Una demo live di questo codice è disponibile qui .
Implementazione della numerazione multilivello utilizzando i contatori CSS
CSS
ul {
list-style: none;
counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
counter-increment: list-item-number;
}
li:before {
content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}
HTML
<ul>
<li>Level 1
<ul>
<li>Level 1.1
<ul>
<li>Level 1.1.1</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 2.1
<ul>
<li>Level 2.1.1</li>
<li>Level 2.1.2</li>
</ul>
</li>
</ul>
</li>
<li>Level 3</li>
</ul>
Quanto sopra è un esempio di numerazione multi-livello che utilizza i contatori CSS. Fa uso del concetto di contatori auto-nidificante . L'annidamento automatico è un concetto in cui se un elemento ha già un contatore con il nome dato ma deve crearne un altro, lo crea come figlio del contatore esistente. Qui, il secondo livello ul eredita già il contatore list-item-number dal suo genitore, ma deve quindi creare il proprio numero list-item-number (per i suoi figli li ) e quindi crea il numero list-item-number[1] (contatore per secondo livello) e lo annida sotto il numero list-item-number[0] (contatore per il primo livello). In tal modo raggiunge la numerazione multilivello.
L'output viene stampato utilizzando la funzione counters() anziché la funzione counter() poiché la funzione counters() è progettata per prefissare il valore di tutti i contatori di livello superiore (parent) durante la stampa dell'output.