How to use css counter-reset attribute

青灯夜游
Release: 2019-05-30 17:01:50
Original
3253 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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template