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

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

image.png

  • 思源笔记

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

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

    22337 引用 • 89378 回帖
  • Q&A

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

    8112 引用 • 37001 回帖 • 160 关注

相关帖子

欢迎来到这里!

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

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

    可以选择删除

推荐标签 标签

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • ZooKeeper

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

    59 引用 • 29 回帖 • 5 关注
  • 代码片段

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

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

    69 引用 • 372 回帖
  • 外包

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

    26 引用 • 232 回帖 • 2 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 1 关注
  • Kotlin

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

    19 引用 • 33 回帖 • 63 关注
  • danl
    132 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 6 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 587 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 19 关注
  • SSL

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

    70 引用 • 193 回帖 • 431 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • 工具

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

    286 引用 • 729 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 721 关注
  • 区块链

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

    91 引用 • 751 回帖 • 2 关注
  • jQuery

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

    63 引用 • 134 回帖 • 724 关注