How to use css counter-reset attribute-Front-end Q&A-php.cn

How to use css counter-reset attribute

青灯夜游

Release： 2019-05-30 17:01:50

Original

3267 people have browsed it

css The counter-reset attribute is used to create or reset one or more counters, usually used together with the counter-increment attribute and the content attribute. Using this property, the counter can be set or reset to any value, either positive or negative. If number is not provided, it defaults to 0.

How to use css counter-reset attribute

How to use the css counter-reset attribute?

The counter-reset property creates or resets one or more counters.

counter-reset: none|id number|inherit

Copy after login

Attribute value:

● None: Default. The selector counter cannot be reset

●　id number: id is used to define the selector (id or class) that resets the counter. number is used to set the value of the counter for the number of occurrences of this selector; can be a positive number, zero, or a negative number.

● inherit: Specifies that the value of the counter-reset attribute should be inherited from the parent element

Description: Using this attribute, the counter can be set or reset to any value, you can is a positive or negative value. If number is not provided, it defaults to 0.

Note: If "display: none" is used, the counter cannot be reset. If you use "visibility: hidden" you can reset the counter. All browsers support the counter-reset attribute.

css counter-reset attribute example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
	counter-increment:section;
	content:"章节 " counter(section) ". ";
}
h2:before 
{
	counter-increment:subsection;
	content:counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>PHP教程</h1>
<h2>PHP教程</h2>
<h2>PHP教程</h2>
<h2>PHP教程</h2>

<h1>HTML教程</h1>
<h2>HTML教程</h2>
<h2>HTML教程</h2>

<h1>CSS教程</h1>
<h2>CSS教程</h2>
<h2>CSS教程</h2>

</body>
</html>

Copy after login

Rendering:

How to use css counter-reset attribute

The above is the detailed content of How to use css counter-reset attribute. For more information, please follow other related articles on the PHP Chinese website!