CSS中的counter-reset属性用于为元素创建或重置CSS计数器。该属性与counter-increment属性和content属性一起使用。
用法:
counter-reset = none|name number|initial|inherit;
属性值:
- none:它是默认值。此值不会重置计数器。
- name number:每次出现元素时重置计数器的值。如果未指定,则默认值为0。
- initial:它将counter-reset属性设置为其默认值。
- inherit:元素从其父元素继承属性。
范例1:本示例使用counter-reset属性创建部分。
<!DOCTYPE html>
<html>
<head>
<!-- CSS property to set counter-reset property -->
<style>
/* set chapter counter to 0*/
body {
counter-reset:chapter;
}
.chapter:before {
content:counter(chapter) ". ";
display:inline;
}
.chapter {
/* Increment the chapter counter by 1,
same as counter-increment:chapter 1; */
counter-increment:chapter;
/* set section counter to 0 */
counter-reset:section;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class = "chapter">HTML</div>
<div class = "chapter">CSS</div>
<div class = "chapter">PHP</div>
</body>
</html>
输出:
范例2:本示例使用counter-reset属性创建节和小节。
<!DOCTYPE html>
<html>
<head>
<!-- CSS style to create counter-reset property -->
<style>
body {
counter-reset:section;
}
h1 {
counter-reset:category;
}
h1:before {
counter-increment:section;
content:"Section " counter(section) ". ";
}
h3:before {
counter-increment:category;
content:counter(section) "." counter(category) " ";
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML</h3>
<h3>CSS </h3>
<h1>References</h1>
<h3>HTML Tags</h3>
<h3>CSS Properties</h3>
</body>
</html>
输出:
支持的浏览器:下面列出了counter-reset属性支持的浏览器:
- 谷歌浏览器4.0
- Internet Explorer 8.0
- Firefox 2.0
- Safari 3.1
- Opera 9.6
相关用法
- HTML Style counterReset用法及代码示例
- CSS transition-property用法及代码示例
- CSS all属性用法及代码示例
- CSS right属性用法及代码示例
- CSS nav-up用法及代码示例
- CSS nav-down用法及代码示例
- CSS top属性用法及代码示例
- CSS nav-right用法及代码示例
- CSS resize属性用法及代码示例
- CSS border-right用法及代码示例
- CSS will-change用法及代码示例
- CSS bleed属性用法及代码示例
- CSS clear属性用法及代码示例
- CSS quotes属性用法及代码示例
- HTML DOMRectReadOnly x用法及代码示例
注:本文由纯净天空筛选整理自ChinkitManchanda大神的英文原创作品 CSS | counter-reset Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。