编程笔记 html5&css&js 058 css计数器

简介: 编程笔记 html5&css&js 058 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-8">
    <title>CSS响应式布局 编程笔记 html5&css&js</title>
    <style>
        body {
            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>

小结

计数器可以使用有序列表具有自定义的格式,以满足实际需要。

相关文章
|
13天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
18天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
33 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
7天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
45 6
|
5天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
10 2
|
2月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
39 0
JS配合CSS3实现动画和拖动小星星小Demo
|
2月前
|
JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果
JavaScript编程实现tab选项卡切换的效果
|
2月前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
|
2月前
|
JavaScript 前端开发 安全
JavaScript编程实现字符和字符串翻转
JavaScript编程实现字符和字符串翻转