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

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

image.png

  • 思源笔记

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

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

    20961 引用 • 82275 回帖
  • Q&A

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

    7430 引用 • 33783 回帖 • 199 关注

相关帖子

欢迎来到这里!

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

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

    可以选择删除

推荐标签 标签

  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 424 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 598 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 1 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖
  • JavaScript

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

    722 引用 • 1278 回帖 • 62 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 6 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 700 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 627 关注
  • 自由行
  • API

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

    76 引用 • 429 回帖 • 3 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    121 引用 • 171 回帖
  • Sphinx

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

    1 引用 • 197 关注
  • gRpc
    11 引用 • 9 回帖 • 52 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 136 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖 • 1 关注
  • Sym

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

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

    524 引用 • 4599 回帖 • 703 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 3 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 3 关注
  • TGIF

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

    287 引用 • 4484 回帖 • 665 关注
  • 书籍

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

    77 引用 • 390 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 622 关注
  • 尊园地产

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

    1 引用 • 22 回帖 • 729 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 2 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 560 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 723 关注
  • Flume

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

    9 引用 • 6 回帖 • 621 关注