给别人搭建网站,信宜网站开发公司,ps网站建设要知道的知识,html代码编辑编程笔记 html5cssjs 058 css计数器 一、带计数器的自动编号二、嵌套计数器三、CSS 计数器属性练习小结 CSS 计数器是由 CSS 保持的“变量”#xff0c;其值可以通过 CSS 规则递增#xff08;以跟踪其使用次数#xff09;。计数器使您可以根据内容在文档中的位置来… 编程笔记 html5cssjs 058 css计数器 一、带计数器的自动编号二、嵌套计数器三、CSS 计数器属性练习小结 CSS 计数器是由 CSS 保持的“变量”其值可以通过 CSS 规则递增以跟踪其使用次数。计数器使您可以根据内容在文档中的位置来调整其外观。 一、带计数器的自动编号
CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增将跟踪它们的使用次数。 如需使用 CSS 计数器我们将使用以下属性 counter-reset - 创建或重置计数器 counter-increment - 递增计数器值 content - 插入生成的内容 counter() 或 counters() 函数 - 将计数器的值添加到元素
body {counter-reset: section;
}
h2::before {counter-increment: section;content: Section counter(section) : ;
}二、嵌套计数器
下面的例子为页面section创建一个计数器为每个 h1 元素subsection创建一个计数器。 “section” 计数器为每个 h1 元素计数同时写入 “Section” 以及 section 计数器的值“subsection” 计数器为每个 h2 元素计数同时写入 section 计数器的值以及 subsection 计数器的值
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) ;
}计数器对于创建概述列表也很有用因为在子元素中会自动创建一个计数器的新实例。在这里我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串
ol {counter-reset: section;list-style-type: none;
}
li::before {counter-increment: section;content: counters(section,.) ;
}三、CSS 计数器属性
属性 描述
content 与 ::before 和 ::after 伪元素一同使用来插入生成的内容。
counter-increment 递增一个或多个计数器值。
counter-reset 创建或重置一个或多个计数器。练习
!doctype html
html lang zh-cn
head
meta charset UTF-8titleCSS响应式布局 编程笔记 html5cssjs/titlestylebody {text-align: center;counter-reset: section;color: cyan;background-color: teal;}h2::before {counter-increment: section;content: 第 counter(section) 章 ;}/style
/head
body
h1《青少年成长管理》
/h1
h2成长工程/h2
h2成长要素/h2
h2成长目标/h2
h2成长资源/h2
h2专业选择/h2
h2成长导师/h2
h2时间管理/h2
h2学习方法/h2
h2常见问题/h2
h2成长计划/h2
h2项目计划/h2
h2任务计划/h2
h2计划执行/h2
h2考核评价/h2
h2调整改进/h2
h2走进社会/h2
h2改变世界/h2
h2成就人生/h2
/body
/html小结
计数器可以使用有序列表具有自定义的格式以满足实际需要。
