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

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

image.png

  • 思源笔记

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

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

    23020 引用 • 92599 回帖
  • Q&A

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

    8449 引用 • 38491 回帖 • 155 关注

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 像 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

    可以选择删除

  • 我想让一级是 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 回复

推荐标签 标签

  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    78 引用 • 391 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 603 关注
  • DNSPod

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

    6 引用 • 26 回帖 • 518 关注
  • Vditor

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

    354 引用 • 1823 回帖 • 1 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 772 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • Flume

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

    9 引用 • 6 回帖 • 637 关注
  • Solidity

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

    3 引用 • 18 回帖 • 400 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 653 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 446 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 416 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 250 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • 负能量

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

    88 引用 • 1235 回帖 • 410 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    90 引用 • 562 回帖 • 1 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 75 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 335 关注
  • Vim

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

    29 引用 • 66 回帖 • 2 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    288 引用 • 734 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    26 引用 • 196 回帖 • 17 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 50 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖 • 2 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 370 关注