Παράμετρος counter-set του CSS

定义和用法

counter-set 属性用于创建并将CSS计数器设置为特定值。

counter-set 属性通常与counter-increment属性和content属性一起使用。

实例

例子1

创建一个计数器（"my-counter"），将其设置为5，并在每次出现<h2>选择器时将其增加1：

body {
  /* 将"my-counter"设置为5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Αύξηση του "my-counter" κατά 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Προσπαθήστε το شخصικά

例子2

创建一个计数器（"my-counter"），将其设置为5，并在每次出现<h2>选择器时将其减少1：

body {
  /* 将"my-counter"设置为5 */
  counter-set: my-counter 5;
}
h2::before {
  /* 将"my-counter"减少1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Προσπαθήστε το شخصικά

例子3

使用"Section 10:"、"10.1"、"10.2"等格式为章节和子章节编号：

body {
  /* "section"设置为9 */
  counter-set: section 9;
}
h1 {}}
  /* Ρύθμιση του "subsection" σε 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Αύξηση του "section" κατά 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Αύξηση του "subsection" κατά 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Προσπαθήστε το شخصικά

Παράδειγμα 4

Δημιουργία ενός αριθμητή, ρύθμιση του σε 9 και αύξηση του κατά 1 κάθε φορά που εμφανίζεται ο επιλογέας <h2> (χρησιμοποιώντας Ρωμαϊκούς αριθμούς):

body {
  /* Ρύθμιση του "my-counter" σε 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Αύξηση του "my-counter" κατά 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Προσπαθήστε το شخصικά

Γλώσσα CSS

counter-set: μηδέν|counter-name number|initial|εκμάθηση;

Τιμή ιδιότητας

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμήματα στην τάβλη αναφέρουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει την ιδιότητα.

Σχετικές σελίδες

Αναφορά:::before ψευδοεлемент

Αναφορά:::after ψευδοεлемент

Αναφορά:Παράμετρος content του CSS

Αναφορά:Παράμετρος counter-increment του CSS

Αναφορά:Ενότητα CSS counter()