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.mzph.cn/pingmian/70094.shtml

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

相关文章

人工智能3d点云之Pointnet++项目实战源码解读(点云分类与分割)

一.项目文件概述 二.数据读取模块配置 实际代码运行时是先定义与加载好模型&#xff0c;然后再去读取数据进来传入到模型网络中去训练。但现在反过来先读取数据开始。 进入ModelNetDataLoader类的_getitem方法, 做标准化的目的是处理异常大的数值 上面返回的cls是类别,相当于…

[250217] x-cmd 发布 v0.5.3:新增 DeepSeek AI 模型支持及飞书/钉钉群机器人 Webhook 管理

目录 X-CMD 发布 v0.5.3&#x1f4c3;Changelog&#x1f9e9; deepseek&#x1f9e9; feishu|dingtalk&#x1f4e6; x-cmd✅ 升级指南 X-CMD 发布 v0.5.3 &#x1f4c3;Changelog &#x1f9e9; deepseek 新增 deepseek 模块&#xff0c;用户可通过 deepseek 直接请求使用 …

图论:tarjan 算法求解强连通分量

题目描述 有一个 n n n 个点&#xff0c; m m m 条边的有向图&#xff0c;请求出这个图点数大于 1 1 1 的强连通分量个数。 输入格式 第一行为两个整数 n n n 和 m m m。 第二行至 m 1 m1 m1 行&#xff0c;每一行有两个整数 a a a 和 b b b&#xff0c;表示有一条…

led+串口代码 重定向 STM32F030F4P6 fgetc multiply defined错误

led串口 重定向 STM32F030F4P6 重定向报错 axf: Error: L6200E: Symbol fgetc multiply defined (by usart.o and main.o). 把 #include "stdio.h" int fputc(int ch, FILE *fp) {HAL_UART_Transmit(&huart1, (uint8_t *)&ch, 1, 0xffff);return ch; }int f…

Letsencrypt+certbot为域名免费配置ssl

1、基础概念 Let’s Encrypt 是一个提供免费 SSL/TLS 证书的认证机构&#xff0c;它的目标是让互联网上的通信更加安全&#xff0c;特别是普及 HTTPS。通过 Let’s Encrypt 提供的证书&#xff0c;网站可以使用加密连接&#xff0c;保护用户的数据传输。 Certbot 是一个由电子…

BSD协议栈:UDP发送

BSD实现 在BSD中UDP头部数据结构如下&#xff1a; /** Udp protocol header.* Per RFC 768, September, 1981.*/ struct udphdr {u_short uh_sport; /* source port */u_short uh_dport; /* destination port */short uh_ulen; /* udp length */u_short uh_sum; /* udp …

QT (四)模型/视图 QFileSystemModel,QStringListModel,QStandardItemModel

思考&#xff1a;QTableWidget 在某种程度上可以等价为QStandardItemModel&#xff0c;同理&#xff0c;其他的功能也有类似的等价&#xff0c;但是以当前的QTableWidget 和QStandardItemModel为例的话&#xff0c;两者都是用于实现建立表格的相关组件&#xff0c;只不过QStand…

Unity热更新方案HybridCLR+YooAsset,从零开始,保姆级教程,纯c#开发热更

文章目录&#xff1a; 一、前言二、创建空工程三、接入HybridCLR四、接入YooAsset五、搭建本地资源服务器Nginx六、实战七、最后八、后记 一、前言 unity热更有很多方案&#xff0c;各种lua热更&#xff0c;ILRuntime等&#xff0c;这里介绍的是YooAssetHybridCLR的热更方案&a…

Zabbix——监控Windows下某个文件夹的所有文件变化

获取所有的指定路径下的文件列表 以D:\Apps这个文件夹下的所有文件为例&#xff0c;我需要找到这个文件夹里面的子文件夹中的所有文件&#xff0c;但是排除backup这个文件夹&#xff0c;下面我们来看怎么操作 在scripts目录下创建check_file_in_D_Apps.ps1文件&#xff0c;内容…

C++ Primer 函数匹配

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…

java八股文-mysql

1. 索引 1.1 什么是索引 索引(index)是帮助Mysql高效获取数据的数据结构(有序).提高数据的检索效率,降低数据库的IO成本(不需要全表扫描).通过索引列对数据进行排序,降低数据排序成本,降低了CPU的消耗. 1.2 mysql索引使用的B树? 1. 没有使用二叉树&#xff0c;最坏情况o&…

Docker拉不下来镜像问题解决法案

打开docker的设置界面 配置如下&#xff1a; vi /etc/docker/daemon.json {"builder": {"gc": {"defaultKeepStorage": "20GB","enabled": true}},"experimental": false,"registry-mirrors": ["…

春招项目=图床+ k8s 控制台(唬人专用)

1. 春招伊始 马上要春招了&#xff0c;一个大气的项目&#xff08;冲击波项目&#xff09;直观重要&#xff0c;虽然大家都说基础很重要&#xff0c;但是一个足够新颖的项目完全可以把你的简历添加一个足够闪亮的点。 这就不得不推荐下我的 k8s 图床了&#xff0c;去年折腾快…

wordpress主题插件开发中高频使用的38个函数

核心模板函数 get_header()/get_footer()/get_sidebar() – 加载模板部件 the_title()/the_content()/the_excerpt() – 显示文章标题、内容、摘要 the_post() – 循环中获取文章数据 bloginfo(‘url’) – 获取站点URL wp_head()/wp_footer() – 输出头部/尾部代码 wp_n…

vue点击左边导航,右边出现页面步骤

vue点击左边导航&#xff0c;右边出现页面 步骤 一定要import不然会出错 index.js Course作为Homeview子路由 Homeview加入<Routerview> 点击跳转<RouterLink to> 父Homeview中有RouterView&#xff08;路由出口&#xff0c;跳转至相应路径&#xff09;和Router…

阿里云视频点播,基于thinkphp8上传视频

前端参考官方示例(jQuery版) <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>阿里云 JavaScript上传SDK Demo (使用jquery)</title><script src"__STATIC__/jquery.min.js"></script><sc…

力扣 66.加一 (Java实现)

题目分析 给定一个数组&#xff0c;可以组成一个数字&#xff0c;将数字加一后&#xff0c;返回新数组 思路分析 首先跟着题目思路走&#xff0c;将数组按位*10可以得到数字&#xff0c;再加一&#xff0c;加一后按位%10&#xff0c;可以得到新的数组。但是此处数字会过大&…

[特殊字符] 用Rust重塑Web开发速度极限:Hyperlane框架——开启高性能服务的「光年时代」[特殊字符]

&#x1f525; 每秒百万级请求&#xff1f;Rust超新星Hyperlane框架让Web开发突破性能次元壁&#xff01;&#x1f525; &#x1f31f; 颠覆性技术亮点&#xff1a;为何全球顶尖工程师正疯狂迁移至Hyperlane&#xff1f; ⚡️ 「速度即正义」&#xff1a;重新定义Web性能天花…

DeepSeek与ChatGPT:AI语言模型的全面对决

DeepSeek与ChatGPT&#xff1a;AI语言模型的全面对决 引言&#xff1a;AI 语言模型的时代浪潮一、认识 DeepSeek 与 ChatGPT&#xff08;一&#xff09;DeepSeek&#xff1a;国产新星的崛起&#xff08;二&#xff09;ChatGPT&#xff1a;AI 界的开拓者 二、DeepSeek 与 ChatGP…

visutal studio 2022使用qcustomplot基础教程

编译 下载&#xff0c;2.1.1版支持到Qt6.4 。 拷贝qcustomplot.h和qcustomplot.cpp到项目源目录&#xff08;Qt project&#xff09;。 在msvc中将它俩加入项目中。 使用Qt6.8&#xff0c;需要修改两处代码&#xff1a; L6779 # if QT_VERSION > QT_VERSION_CHECK(5, 2, …