CSS
räknare
Sök…
Syntax
counter-set: [<countername> <integer>? ] + | ingen
counter-reset: [<countername> <integer>? ] + | ingen
counter-increment: [<countername> <integer>? ] + | ingen
räknare (<countername> [, <counterstyle>]?)
räknare (<countername>, <connector-string> [, <counter-style>]?)
parametrar
| Parameter | detaljer |
|---|---|
| counter-namn | Detta är namnet på räknaren som måste skapas eller ökas eller skrivas ut. Det kan vara valfritt anpassat namn som utvecklaren önskar. |
| heltal | Detta heltal är ett valfritt värde som när det anges bredvid räknarens namn kommer att representera räknarens initiala värde (i counter-set , counter-reset ) eller det värde med vilket räknaren ska ökas (i counter-increment ). |
| ingen | Detta är det initiala värdet för alla counter-* egenskaper. När detta värde används för counter-increment är värdet på någon av räknarna påverkas. När detta används för de andra två skapas ingen räknare. |
| counter-stil | Detta anger den stil där räknarvärdet måste visas. Den stöder alla värden som stöds av egenskapen list-style-type . Om none används skrivs räknarvärdet inte alls. |
| kontakt-sträng | Detta representerar strängen som måste placeras mellan värdena på två olika räknarivåer (som "." I "2.1.1"). |
Anmärkningar
Räknare är inte ett nytt ämne i CSS. Det var en del av CSS nivå 2-specifikationerna (revision 1 för att vara exakt) och har därför mycket högt webbläsarsupport.
Alla webbläsare utom IE6 och IE7 har stöd för CSS-räknare.
Tillämpa romerska siffror på räknarens utgång
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>
I exemplet ovan skulle räknarens utgång visas som I, II, III (romerska siffror) istället för de vanliga 1, 2, 3 eftersom utvecklaren uttryckligen har specificerat räknarens stil.
Nummer varje objekt med CSS-räknare
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>
Exemplet ovan numrerar varje "objekt" på sidan och lägger till objektets nummer före dess rubrik (med content för .item-header :before pseudo). En live-demo av denna kod är tillgänglig här .
Implementera flernivå numrering med CSS räknare
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>
Ovanstående är ett exempel på flernivåsnummerering med CSS-räknare. Det använder sig av det självhäckande konceptet av räknare. Självhäckning är ett begrepp där om ett element redan har en räknare med det givna namnet men måste skapa ett annat så skapar det det som ett barn i den befintliga räknaren. Här ärver den andra nivån ul redan list-item-number räknaren från sin överordnade men måste sedan skapa sitt eget list-item-number (för sina barn li ) och skapar så list-item-number[1] (räknare för andra nivå) och häckar den under list-item-number[0] (räknare för första nivå). Därmed uppnås numreringen på flera nivåer.
Utmatningen skrivs ut med funktionen counters() stället för counter() eftersom funktionen counters() är utformad för att prefixa värdet på alla högre nivåräknare (moder) när du skriver ut utmatningen.
