counter
1. counter counter
A counter is a special number tracker, which is usually used to automatically number CSS list items. When the early unordered list ul and ordered list ol elements are defined, the counter will be added automatically counter(), the list will also automatically increment the serial number, and the attributes will take the default value
CSS counters only contentwork with attributes, and contentattributes are used exclusively on before/ afterpseudo-elements.
So, there is an iron triangle relationship of "counter↔pseudo-element↔content attribute" .
2. Properties and methods
1. Counter naming/resetting
counter-reset (multiple counters can be declared at the same time)
counter-reset: name (initialValue||0);
2. Counter-value increment rules
counter-increment increment variable (change value of count)
counter-increment: name (changeValue||1)
The counting of CSS counters has a set of rules, which are called " universal rules ": the counter-reset is unique, and the counter-increment will increase the count value by 1 time for each counter-increment.
A. General exposure
<style>
.counter {
counter-reset: reset 0; counter-increment: reset; }
.counter:before {
content: counter(reset); }
</style>
<p class="counter"></p>
The counter-increment shines on the p tag, and the counter-reset value increases by 1, so the count changes from the initial value of 0 to 1, reset is the counter here, and the content value of the pseudo-element counter (reset) is 1
B. Illuminate itself (counter-increment is directly set on the pseudo-element), the result is the same as above
<style>
.counter {
counter-reset: reset 0; }
.counter:before {
content: counter(reset); counter-increment: reset; }
</style>
<p class="counter"></p>
If both the parent element and the child element are illuminated by counter-increment once, the result should be that the counter is illuminated twice, and the result is 2
The parent element is not illuminated, the default value is reset to 0, and the parent element has 2 children. Children themselves receive universal care. What is the count value of the two children?
.counter {
counter-reset: reset 0;
font-size: 24px;
}
.counter:before,
.counter:after {
content: counter(reset);
counter-increment: reset;
}
<p class="counter"> vs </p>
The value of the counter changes in accordance with the HTML rendering sequence. When an increment counter is encountered, it changes. When the counter is output, the current count value is output.
3. Counter display counter() / counters() function
content: counter(name, style) // 1，2，3
content: counters(name, string, style); // 显示嵌套计数，如1.1，1.2，1.3……
string: string, the connector of the sub-serial number https://codepen.io/airen/pen/YzVBVrG
style: support the keyword list-style-type, the increment and decrement are not necessarily numbers, they can be English letters or others
Three code examples
1. Restart counting
In the same level, you can interrupt (or overwrite) the previous count and start over by repeatedly declaring a counter with the same name.
<div class="level1">
<div class="level1-item">foo</div>
<div class="level1-item">bar</div>
<div class="level1-item break">baz</div>
<div class="level1-item">qux</div>
</div>
<style>
.level1 {
counter-reset: level1;
}
.break {
counter-reset: level1;
}
.level1-item:before {
content: counter(level1, upper-roman) '.';
counter-increment: level1 1;
}
</style>
2. Counters nested use
"The universal source is unique " => " the universal source (reset) in a container is unique"
To achieve nesting, each list container must have a "perfect source", through the child's reset of the parentcounter-reset, Cooperate withcounters()the method to achieve the effect of counting nesting.
html:
<div class="reset">
<div class="counter">text1
<div class="reset">
<div class="counter">text1-1</div>
<div class="counter">text1-2
<div class="reset">
<div class="counter">text1-2-1</div>
<div class="counter">text1-2-2</div>
<div class="counter">text1-2-3</div>
</div>
</div>
<div class="counter">text1-3</div>
</div>
</div>
<div class="counter">text2</div>
<div class="counter">text3
<div class="reset">
<div class="counter">text3-1</div>
</div>
</div>
</div>
css:
<style>
.reset {
padding-left: 20px;
counter-reset: line;
}
.counter:before {
content: counters(line, '-') '. ';
counter-increment: line;
}
</style>
If you do not guarantee the uniqueness of the source in a container, disrupt the html order:
<div class="reset">
<div class="counter">text1</div>
<div class="reset">
<div class="counter">text1-1</div>
<div class="counter">text1-2
<div class="reset">
<div class="counter">text1-2-1</div>
<div class="counter">text1-2-2</div>
<div class="counter">text1-2-3</div>
</div>
</div>
<div class="counter">text1-3</div>
</div>
<div class="counter">text2</div>
<div class="counter">text3</div>
</div>
The reset here is a sibling relationship with the above counter, not a parent-child relationship. The reset of a container is the only one. Once the child element resets, it will change the nesting relationship of the entire container
3. Present CSS var variable value with CSS counter
::markerIt is a new pseudo-element in CSS, which is used to match the "mark box" in the list item (set as adisplay:list-itemblock-level element, there is an additional box besides the main block-level box), and can set the content inside the mark box And UI related to character display.
For example, for elements that everyone is familiar with<li>, you can directly use::markerpseudo-elements to change the color of the bullet, the font size, and even the content
<style>
li {
display: list-item;
}
li::marker {
content: "(" counter(list-item) ")";
}
</style>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Sometimes CSS variables may be required to be rendered on the page as characters, and CSS variables directly used as content attribute values have no effect
/* 无效 */
.bar::before {
content: var(--percent);
}
Although the content attribute itself does not support variables, the initial value of the counter behind the counter-reset attribute is supported, and the effect can be achieved by using counter and content together:
.bar::before {
counter-reset: progress var(--percent);
content: counter(progress);
}
