CSS
Liczniki

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Szukaj…


Składnia

  • licznik: [<nazwa_licznika> <integer>? ] + | Żaden

  • counter-reset: [<nazwa_licznika> <integer>? ] + | Żaden

  • przeciwwzrost: [<nazwa_licznika> <integer>? ] + | Żaden

  • counter (<nazwa licznika> [, <styl licznika>]?)

  • liczniki (<nazwa licznika>, <łańcuch łączący> [, <styl licznika>]?)

Parametry

Parametr Detale
przeciwna nazwa Jest to nazwa licznika, który należy utworzyć, zwiększyć lub wydrukować. Może to być dowolna nazwa niestandardowa, zgodnie z życzeniem dewelopera.
liczba całkowita Ta liczba całkowita jest wartością opcjonalną, która podana obok nazwy licznika będzie reprezentować wartość początkową licznika (w counter-set counter-reset właściwości counter-reset ) lub wartość, o którą licznik powinien być zwiększany (w counter-increment ).
Żaden Jest to wartość początkowa dla wszystkich 3 właściwości counter-* . Gdy ta wartość jest używana do counter-increment , nie ma to wpływu na wartość żadnego z liczników. Gdy jest to używane dla pozostałych dwóch, licznik nie jest tworzony.
przeciwny styl Określa styl, w którym wartość licznika musi być wyświetlana. Obsługuje wszystkie wartości obsługiwane przez właściwość list-style-type . Jeśli none zostanie użyta none wartość licznika nie zostanie w ogóle wydrukowana.
łącznik-ciąg Reprezentuje ciąg, który należy umieścić między wartościami dwóch różnych poziomów licznika (jak „.” W „2.1.1”).

Uwagi

Liczniki nie są nowym tematem w CSS. Była to część specyfikacji CSS poziomu 2 (a dokładniej wersja 1), a zatem ma bardzo wysoką obsługę przeglądarki.

Wszystkie przeglądarki oprócz IE6 i IE7 mają obsługę liczników CSS.

Zastosowanie stylizacji cyfr rzymskich do wyjścia licznika

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>

W powyższym przykładzie dane wyjściowe licznika byłyby wyświetlane jako I, II, III (liczby rzymskie) zamiast zwykłych 1, 2, 3, ponieważ programista wyraźnie określił styl licznika.

Numeruj każdy element za pomocą licznika 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>

Powyższy przykład numeruje każdy „element” na stronie i dodaje numer elementu przed jego nagłówkiem (używając właściwości content elementu .item-header :before pseudo). Wersja demonstracyjna tego kodu jest dostępna tutaj .

Implementacja numeracji wielopoziomowej przy użyciu liczników 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>

Powyżej jest przykładem numeracji wielopoziomowej przy użyciu liczników CSS. Wykorzystuje koncepcję samozakleszczania liczników. Własne zagnieżdżanie to koncepcja, w której jeśli element ma już licznik o podanej nazwie, ale musi utworzyć inny, wówczas tworzy go jako element potomny istniejącego licznika. Tutaj drugi poziom ul dziedziczy już licznik list-item-number z list-item-number nadrzędnej, ale następnie musi utworzyć swój własny list-item-number (dla swoich potomnych li ) i w ten sposób tworzy list-item-number[1] (licznik dla drugi poziom) i zagnieżdża go pod list-item-number[0] (licznik dla pierwszego poziomu). W ten sposób osiąga numerację wielopoziomową.

Dane wyjściowe są drukowane przy użyciu funkcji counters() zamiast funkcji counter() ponieważ funkcja counters() ma na celu prefiksowanie wartości wszystkich liczników wyższego poziomu (macierzystych) podczas drukowania wyniku.



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow