CSS => räknare

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.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow