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

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

image.png

  • 思源笔记

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

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

    20961 引用 • 82277 回帖
  • Q&A

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

    7430 引用 • 33784 回帖 • 199 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 我想让一级是 1,二级是圆圈 ①,三级是 (1),四级是 1)

    请问 CSS 应该怎么写啊?

    十分感谢!

    1 回复
  • 其他回帖
  • 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 回复
  • 像 Savor 主题的有序列表样式就是这样的:

    image.png

    可以参考 Savor 主题的代码

  • 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

    可以选择删除

推荐标签 标签

  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 651 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 4 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4599 回帖 • 703 关注
  • PWL

    组织简介

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

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

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

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧!

    246 引用 • 1786 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 197 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    76 引用 • 429 回帖 • 3 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • ActiveMQ

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

    19 引用 • 13 回帖 • 660 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 2 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    28 引用 • 66 回帖 • 1 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1234 回帖 • 431 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    340 引用 • 1761 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 6 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 148 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 2 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 37 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    19 引用 • 7 回帖 • 1 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    287 引用 • 4484 回帖 • 665 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 152 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖 • 1 关注