HTML5+CSS多层级ol标签序号样式问题

在CSS中,ol标签用于创建有序列表,而多层级的ol标签可以通过CSS实现不同的序号样式。以下是一些常见的问题和解决方案:

1. 多层级ol的序号格式问题

默认情况下,多层级的ol标签会自动继承父级的序号格式,但有时我们可能需要为每个层级设置不同的序号格式。

示例代码:
<ol><li>第一层<ol><li>第二层</li><li>第二层<ol><li>第三层</li><li>第三层</li></ol></li></ol></li><li>第一层</li>
</ol>
默认样式:

默认情况下,多层级的ol会显示为:

1. 第一层a. 第二层b. 第二层i. 第三层ii. 第三层
2. 第一层
自定义样式:

如果需要自定义每个层级的序号格式,可以通过CSS的counter属性和伪元素来实现。

ol {counter-reset: list-counter; /* 初始化一个计数器 */list-style: none; /* 移除默认样式 */padding-left: 0;
}ol > li {counter-increment: list-counter; /* 每个li递增计数器 */margin-bottom: 10px;
}ol > li::before {content: counter(list-counter) ". "; /* 使用计数器显示序号 */font-weight: bold;
}ol ol {counter-reset: sub-list-counter; /* 为子级初始化新的计数器 */
}ol ol > li {counter-increment: sub-list-counter;
}ol ol > li::before {content: counter(list-counter) "." counter(sub-list-counter) " "; /* 显示父级和子级序号 */
}ol ol ol > li::before {content: counter(list-counter) "." counter(sub-list-counter) "." counter(third-level-counter) " "; /* 三级列表 */
}
自定义样式效果:
1. 第一层1.1 第二层1.2 第二层1.2.1 第三层1.2.2 第三层
2. 第一层

2. 多层级ol的缩进问题

默认情况下,多层级的ol会有默认的缩进,但可以通过CSS调整缩进。

示例代码:
ol {padding-left: 20px; /* 控制缩进 */
}ol ol {padding-left: 40px; /* 子级缩进 */
}ol ol ol {padding-left: 60px; /* 子子级缩进 */
}

3. 多层级ol的序号重置问题

在某些情况下,子级列表的序号可能会继承父级的序号,导致显示不正确。可以通过counter-reset属性解决。

示例代码:
ol {counter-reset: list-counter; /* 父级初始化计数器 */
}ol > li {counter-increment: list-counter;
}ol ol {counter-reset: sub-list-counter; /* 子级初始化新的计数器 */
}ol ol > li {counter-increment: sub-list-counter;
}

4. 自定义序号样式

如果需要使用罗马数字、字母等作为序号,可以通过list-style-type属性实现。

示例代码:
ol {list-style-type: decimal; /* 数字序号 */
}ol ol {list-style-type: lower-alpha; /* 小写字母 */
}ol ol ol {list-style-type: lower-roman; /* 小写罗马数字 */
}
  • 使用CSS的counter属性可以灵活控制多层级ol的序号格式。

  • list-style-type属性可以用于改变序号的显示类型(如数字、字母、罗马数字等)。

  • 缩进可以通过padding-leftmargin-left属性控制。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/21403.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DeepSeek全栈技术体系解密:从算法源码到企业级智能体开发实战

在AGI技术加速演进的时代背景下&#xff0c;DeepSeek作为行业级大模型的代表&#xff0c;正在重塑智能系统的开发范式。本课程体系首次系统性披露DeepSeek技术栈的完整实现细节&#xff0c;涵盖从底层算法创新、工程架构设计到企业级落地的全链条知识体系。 课程核心价值矩阵 …

CTA 血管重建,三维重建,血管三维重建

CT检查在临床中应用十分广泛&#xff0c;CT以其扫描速度快&#xff0c;对骨头及钙化敏感而具有部分优势。 CTA是CT血管成像&#xff0c;是CT临床应用中一个非常重要的部分&#xff0c;由于血管及其背景软组织自然对比差&#xff0c;常规CT平扫往往难以显示血管。在行CTA检查的时…

基础排序算法

冒泡排序 冒泡排序&#xff08;Bubble Sort&#xff09;一种交换排序&#xff0c;它的基本思想是&#xff1a;两两比较相邻记录的关键字&#xff0c;如果反序则交换&#xff0c;直到没有反序的记录为止。 以下代码是改进的冒泡算法&#xff0c;在排序好了之后可以直接跳出循环…

什么是神经网络?

0 前言 神经网络是一种人工智能方法&#xff0c;用于教计算机以受人脑启发的方式处理数据。这是一种机器学习过程&#xff0c;称为深度学习&#xff0c;它使用类似于人脑的分层结构中的互连节点或神经元。它可以创建自适应系统&#xff0c;计算机使用该系统来从错误中进行学习…

MySQL 主从复制原理及其工作过程

一、MySQL主从复制原理 MySQL 主从复制是一种将数据从一个 MySQL 数据库服务器&#xff08;主服务器&#xff0c;Master&#xff09;复制到一个或多个 MySQL 数据库服务器&#xff08;从服务器&#xff0c;Slave&#xff09;的技术。以下简述其原理&#xff0c;主要包含三个核…

Ext系列文件系统 -- 磁盘结构,磁盘分区,inode,ext文件系统,软硬链接

目录 1.理解硬盘 1.1 磁盘、服务器、机柜、机房 1.2 磁盘物理结构 1.3 磁盘的存储结构 1.4 磁盘的逻辑结构 1.4.1 理解逻辑结构 1.4.2 真实过程 1.5 CHS地址和LBA地址的相互转换 2.引入文件系统 2.1 “块”概念 2.2 “分区”概念 2.3 “inode”概念 3.ext2文件系…

C# 背景 透明 抗锯齿 (效果完美)

主要是通过 P/Invoke 技术调用 Windows API 函数 gdi32.dll/user32.dll&#xff0c;同时定义了一些结构体来配合这些 API 函数的使用&#xff0c;常用于处理图形绘制、窗口显示等操作。 运行查看效果 局部放大&#xff0c;抗锯齿效果很不错,尾巴毛毛清晰可见。 using System; u…

Elasticsearch 混合搜索 - Hybrid Search

作者&#xff1a;来自 Elastic Valentin Crettaz 了解混合搜索、Elasticsearch 支持的混合搜索查询类型以及如何制作它们。 本文是三篇系列文章中的最后一篇&#xff0c;深入探讨了向量搜索&#xff08;又称语义搜索&#xff09;的复杂性以及它在 Elasticsearch 中的实现方式。…

【分布式理论12】事务协调者高可用:分布式选举算法

文章目录 一、分布式系统中事务协调的问题二、分布式选举算法1. Bully算法2. Raft算法3. ZAB算法 三、小结与比较 一、分布式系统中事务协调的问题 在分布式系统中&#xff0c;常常有多个节点&#xff08;应用&#xff09;共同处理不同的事务和资源。前文 【分布式理论9】分布式…

Zabbix 7.2实操指南:基于OpenEuler系统安装Zabbix 7.2

原文出处&#xff1a;乐维社区 部署环境 openEuler 22.03 LTS PHP 8.0 Apache Mysql 8.0 MySQL数据库 6.0 以上版本需要安装mysql8.0以上版本的数据库&#xff08;以mysql为例子&#xff09;。 欧拉系统自带 mysql8.0 的源&#xff0c;无需要安装额外的源。 安装mysql …

什么是DeFi (去中心化金融)

DeFi (去中心化金融) 概述 &#x1f4b0; 1. DeFi 基础概念 1.1 什么是 DeFi&#xff1f; DeFi 是建立在区块链上的金融服务生态系统&#xff0c;它&#xff1a; 无需中心化中介开放且透明无需许可即可参与代码即法律 1.2 DeFi 的优势 开放性&#xff1a;任何人都可以参与…

python-leetcode 39.二叉树的直径

题目&#xff1a; 给定一棵二叉树的根节点&#xff0c;返回该树的直径。 二叉树的直径是指中间任意两个节点之间最长路径的长度。这条路径可能经过也可能不经过根节点root 两节点之间路径的长度由他们之间的边数表示 方法一&#xff1a;深度优先搜索 一条路径的长度为该路…

python爬虫系列课程2:如何下载Xpath Helper

python爬虫系列课程2:如何下载Xpath Helper 一、访问极简插件官网二、点击搜索按钮三、输入xpath并点击搜索四、点击推荐下载五、将下载下来的文件解压缩六、打开扩展程序界面七、将xpath.crx文件拖入扩展程序界面一、访问极简插件官网 极简插件官网地址:https://chrome.zzz…

C++17 中的 std::to_chars 和 std::from_chars:高效且安全的字符串转换工具

文章目录 1. 传统转换方法的局限性2. std::to_chars&#xff1a;数值到字符串的高效转换函数原型&#xff1a;返回值&#xff1a;示例代码&#xff1a;输出&#xff1a; 3. std::from_chars&#xff1a;字符串到数值的高效解析函数原型&#xff1a;返回值&#xff1a;示例代码&…

初尝git自结命令大全与需要理解的地方记录

常用命令 git init–初始化工作区touch 文件全称–在工作区创建文档rm 文件全称 --删除文档notepad 文件全称–在工作区打开文档cat 文件全称–在显示框显示文档的东西git status --显示工作区的文件冲突的文件 &#xff08;git add 文件全称或者.&#xff09; —将工作区文件…

Python——生成AIGC图像

文章目录 一、背景介绍 二、效果图展示 三、完整代码 四、分步解释 五、实用建议 1&#xff09;提示词技巧 2&#xff09;性能优化 3&#xff09;常见问题处理 4&#xff09;扩展功能建议 六、注意事项 1. 硬件要求 2. 法律合规 3. 模型安全 一、背景介绍 AIGC&a…

MyBatis框架七:缓存

精心整理了最新的面试资料&#xff0c;有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 MyBatis缓存介绍 正如大多数持久层框架一样&#xff0c;MyBatis 同样提供了一级缓存和二级缓存的支持 1、一级缓存: 基于PerpetualCache 的 HashMap本地缓存&#xf…

【Unity动画】导入动画资源到项目中,Animator播放角色动画片段,角色会跟随着动画播放移动。

导入动画资源到项目中&#xff0c;Animator播放角色动画片段,角色会跟随着动画播放移动&#xff0c;但我只想要角色在原地播放动画。比如&#xff1a;播放一个角色Run动画&#xff0c;希望角色在原地奔跑&#xff0c;而不是产生了移动距离。 问题排查&#xff1a; 1.是否勾选…

WLAN无线2.4G/5G频段划分和可用信道

互联网各领域资料分享专区(不定期更新)&#xff1a; Sheet

2025年archlinux tigervnc分辨率设置不生效的问题

在此之前我知道的修改分辨率的方法&#xff0c;有两种&#xff1a; 1. 参数geometry实现 在ubuntu中配置vnc,可以参考&#xff1a; 《ubuntu server 20.04安装vnc远程桌面xfce4》 https://blog.csdn.net/lxyoucan/article/details/121672487 设置vnc的分辨率非常简单 vncse…