CSS实现自动序号 counter-reset: NO。例如：01、02、03...；1、1.1、1.2、2、2.1、2.2、2.3等等

你挚爱的强哥

于 2023-03-28 22:31:06 发布

阅读量458

点赞数

分类专栏： CSS2/CSS3/LESS/SASS/SCSS/HTML 文章标签： html javascript 前端

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

本文链接：https://blog.csdn.net/qq_37860634/article/details/129826740

版权

CSS2/CSS3/LESS/SASS/SCSS/HTML 专栏收录该内容

108 篇文章

订阅专栏

实现01、02、03...

/*css自动序号________________________*/
element第一次出现之前的同级或者父级元素 {
    counter-reset: NO;
    /*初始化变量NO*/
}

element:before {
    counter-increment: NO;
    content: '0' counter(NO) "、";
}

/*解决超过9的序号数字还有0打头*/
element:nth-of-type(n + 9):before {
    content: counter(NO) "、";
}

实现1、1.1、1.2、2、2.1、2.2、2.3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>序列编号</title>
<style>
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
	counter-increment:section;
	content:"Section " counter(section) ". ";
}
h2:before 
{
	counter-increment:subsection;
	content:counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>