css的counter-increment和counter-reset

最新推荐文章于 2024-06-21 23:54:07 发布

web_lc

最新推荐文章于 2024-06-21 23:54:07 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/web_lc/article/details/73111602

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

counter-increment：设置某个选取器每次出现的计数器增量。默认增量是 1。
counter-reset：重置某个选择器出现次数的计数器的值。可以为任意值，默认为 0。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {counter-increment:section;
counter-reset:subsection;}   //在遍历到h1时重置h2的计数器。
h2 {counter-increment:subsection;}
h1:before
{
content:"Section " counter(section) ". ";
}
h2:before 
{


content:counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>title-first</h1>
<h2>这是一句话</h2>
<h2>这是一句话</h2>
<h2>这是一句话</h2>

<h1>title-second</h1>
<h2>这是一句话</h2>
<h2>这是一句话</h2>

<h1>title-third</h1>
<h2>这是一句话</h2>
<h2>这是一句话</h2>
</body>
</html>