文字與排版
counter-resetcounter-reset
Creating named CSS counters and initializing them to specific values.
Overview
| Class | Declarations |
|---|---|
counter-reset:none | counter-reset: none;
|
counter-reset:<name> | counter-reset: <name>;
|
counter-reset:<name>|<integer> | counter-reset: <name> <integer>;
|
counter-reset:reversed(<name>) | counter-reset: reversed(<name>);
|
counter-reset:reversed(<name>)|<integer> | counter-reset: reversed(<name>) <integer>;
|
counter-reset:<name>|<integer>|<name>|<integer> | counter-reset: <name> <integer> <name> <integer>;
|
Basic usage
Create a section counter
Use counter-reset to create a named counter and set its initial value. Regular counters default to 0, so the first counter-increment:section produces 1.
Setup
Usage
<article class="counter-reset:section"> <h2 class="counter-increment:section content:'Section\00a0'counter(section)'.\00a0'::before">Setup</h2> <h2 class="counter-increment:section content:'Section\00a0'counter(section)'.\00a0'::before">Usage</h2></article>Start from another number
Add an integer after the counter name to choose its initial value.
Advanced topics
<article class="counter-reset:chapter|4"> <h2 class="counter-increment:chapter content:'Chapter\00a0'counter(chapter)':\00a0'::before">Advanced topics</h2></article>Create a reversed counter
Use reversed() when a counter should count down from the number of items. Adjust the step with counter-increment.
- Final review
- Deploy
- Monitor
<ol class="counter-reset:reversed(step) list-style:none"> <li class="counter-increment:step|-1 content:counter(step)::before block::before">Final review</li> <li class="counter-increment:step|-1 content:counter(step)::before block::before">Deploy</li> <li class="counter-increment:step|-1 content:counter(step)::before block::before">Monitor</li></ol>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="counter-reset:section:hover counter-reset:section@sm counter-reset:section@dark counter-reset:section@print">…</div>