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.



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow