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

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


实现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>

 


相关文章
|
前端开发
css 自定义 ol/li 序号样式
css 自定义 ol/li 序号样式
800 0
css 自定义 ol/li 序号样式
|
Web App开发 前端开发
CSS ::marker 让文字序号更有意思
CSS ::marker 让文字序号更有意思
235 0
CSS ::marker 让文字序号更有意思
|
5天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
4天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
53 34
|
6天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
58 33
|
27天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
104 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
97 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
56 6