二级序号列表为啥还是 1、2、3 编号?如何修改编号样式?

本贴最后更新于 209 天前,其中的信息可能已经时移世改

转换有序列表后,好像只能使用 1、2、3 编号,连二级列表也是。。。请问如何修改?

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    24937 引用 • 102726 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9489 引用 • 43243 回帖 • 107 关注

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 像 Savor 主题的有序列表样式就是这样的:

    image.png

    可以参考 Savor 主题的代码

  • Muu 2

    我自己改了下这个序号 不知道是不是你想要的

    .protyle-wysiwyg [data-node-id].li>[data-node-id] { margin-left: 30px !important; /* 一级列表偏移 */ padding-right: 0; } .b3-typography li>p, .b3-typography>p, .b3-typography blockquote>p, .b3-typography [data-node-id], .protyle-wysiwyg li>p, .protyle-wysiwyg>p, .protyle-wysiwyg blockquote>p, .protyle-wysiwyg [data-node-id] { line-height: 1.625; /* padding-left: 8px; */ padding: 4px; padding-left: 0px; margin: 2px 0; border-radius: var(--b3-border-radius); } /* 效果: 一级列表 1. 二级列表 1.1 三级列表 1.1.1 */ .list[data-subtype=o] { counter-reset: none; } .protyle-wysiwyg .li[data-subtype=o] { counter-increment: olcounter1 } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] { counter-increment: olcounter2; padding-left: 1.2%; } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] > .protyle-action { color: rgba(0, 0, 0, 0) !important; } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after { content: counter(olcounter1, -moz-devanagari) "." counter(olcounter2, decimal); display: table; } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] { counter-increment: olcounter3; padding-left: 3%; } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action { color: rgba(0, 0, 0, 0) !important } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after { content: counter(olcounter1, decimal) "." counter(olcounter2, decimal) "."counter(olcounter3, decimal) }

    注: 只改了三级菜单(对我个人来说是够用了) 如果还想更多可以自行添加 应该可以按规律添加吧[手动狗头]

    效果图

    image.png

    1 回复
  • 我想让一级是 1,二级是圆圈 ①,三级是 (1),四级是 1)

    请问 CSS 应该怎么写啊?

    十分感谢!

    1 回复
  • Muu 2
    .protyle-wysiwyg [data-node-id].li>[data-node-id] { padding-right: 0; } .b3-typography li>p, .b3-typography>p, .b3-typography blockquote>p, .b3-typography [data-node-id], .protyle-wysiwyg li>p, .protyle-wysiwyg>p, .protyle-wysiwyg blockquote>p, .protyle-wysiwyg [data-node-id] { line-height: 1.625; padding: 4px; padding-left: 0px; margin: 2px 0; border-radius: var(--b3-border-radius); } /* 效果: 一级列表 1. 二级列表 1.1 三级列表 1.1.1 */ .list[data-subtype=o] { counter-reset: none; } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] > .protyle-action, .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action, .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action { color: rgba(0, 0, 0, 0) !important; } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after, .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after, .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after { display: table; } .protyle-wysiwyg .li[data-subtype=o] { counter-increment: olcounter1 } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] { counter-increment: olcounter2; padding-left: 2px; } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] { counter-increment: olcounter3; padding-left: 8px; } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] { counter-increment: olcounter4; padding-left: 5px; } @counter-style roman { system: cyclic; symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫"; suffix: ""; } .protyle-wysiwyg .li[data-subtype=o] > .protyle-action::after { content: counter(olcounter1, decimal); } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after { content: counter(olcounter2, roman); } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after { content: '(' counter(olcounter3, decimal) ")"; } .protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after { content: counter(olcounter4, decimal) ")"; }

    效果图

    image.png

    感觉超过 11 及往后的就很小了

    image.png

    可以选择删除

推荐标签 标签

  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 109 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 434 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 676 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • OneNote
    1 引用 • 3 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 621 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 79 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • danl
    165 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 652 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 5 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖 • 4 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 4 关注
  • abitmean

    有点意思就行了

    32 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 534 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 1 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 444 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3195 引用 • 8215 回帖
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2040 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 391 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 666 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 549 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 736 关注
  • Follow
    4 引用 • 12 回帖 • 11 关注