登录 注册

有序列表样式添加 

.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)
}
​

哪位大神能帮我添加一下四级和五级样式的代码吗？

  • 思源笔记

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

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

    25238 引用 • 104107 回帖
  • Q&A

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

    9645 引用 • 43862 回帖 • 93 关注
成都 位置
20 悬赏
1 收藏
5 回帖
3
2
329 120 134 75

相关帖子

被采纳的回答
  • EmptyLight •
    付费者

    正好空出来了，给你写上了

    /* 四级列表 */
.protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] {
    counter-increment: olcounter4;
    padding-left: 3%;
}

.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] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after {
    content: counter(olcounter1, decimal) "." counter(olcounter2, decimal) "."counter(olcounter3, decimal) "."counter(olcounter4,decimal)
}

/* 五级列表 */
.protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] {
    counter-increment: olcounter5;
    padding-left: 3%;
}

.protyle-wysiwyg .li[data-subtype=o] .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] .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) "."counter(olcounter4,decimal) "."counter(olcounter5,decimal)
}
​

    把这段代码粘贴到原本代码的后面，应该是没有问题的。如果还要继续向后扩展也很容易。

5 回帖
有序列表样式添加

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • EmptyLight •
    付费者

    向后递增就可以了，把 .li 这个选择器多复制几个。参照前面一级二级的递增方法，在选择器（.li[data-subtype=o]）、content 那里接着往下写

    1 回复
  • ioypl •
    付费者 作者

    纯小白，搞不懂，能不能帮写下，求求。

    1 回复
  • EmptyLight •
    付费者

    正好空出来了，给你写上了

    /* 四级列表 */
.protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] {
    counter-increment: olcounter4;
    padding-left: 3%;
}

.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] .li[data-subtype=o] .li[data-subtype=o] > .protyle-action::after {
    content: counter(olcounter1, decimal) "." counter(olcounter2, decimal) "."counter(olcounter3, decimal) "."counter(olcounter4,decimal)
}

/* 五级列表 */
.protyle-wysiwyg .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] .li[data-subtype=o] {
    counter-increment: olcounter5;
    padding-left: 3%;
}

.protyle-wysiwyg .li[data-subtype=o] .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] .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) "."counter(olcounter4,decimal) "."counter(olcounter5,decimal)
}
​

    把这段代码粘贴到原本代码的后面，应该是没有问题的。如果还要继续向后扩展也很容易。

    1 回复
  • ioypl •
    付费者 作者

    PixPin20241114184454.png

    写味主题子弹列表线跟标题有部分重叠，这个样式里能调整吗？

    1 回复
  • EmptyLight •
    付费者

    我没有研究过 Savor 的子弹线哦，或许是因为序号太长了，可能要把前面的序号部分往前移一点

ioypl
成都
回帖
66
 帖子
55
 积分
1535

近期热议

推荐标签 标签

  • Outlook
    1 引用 • 5 回帖
  • OpenCV
    15 引用 • 36 回帖
  • 音乐

    你听到信仰的声音了么？

    62 引用 • 512 回帖
  • Android

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

    335 引用 • 324 回帖
  • Vditor

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

    367 引用 • 1844 回帖 • 2 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 29 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    5 引用 • 16 回帖 • 3 关注
  • GAE

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

    14 引用 • 42 回帖 • 814 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 294 关注
  • Ubuntu

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

    127 引用 • 169 回帖 • 2 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 76 关注
  • Facebook

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

    4 引用 • 15 回帖 • 440 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 368 关注
  • Love2D

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

    14 引用 • 53 回帖 • 553 关注
  • GitLab

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

    46 引用 • 72 回帖 • 2 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    173 引用 • 518 回帖
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    184 引用 • 1015 回帖
  • 代码片段

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

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

    151 引用 • 988 回帖
  • ZeroNet

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

    1 引用 • 21 回帖 • 647 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 316 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖 • 1 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    180 引用 • 408 回帖 • 489 关注
  • C++

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

    107 引用 • 153 回帖 • 1 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    22 引用 • 214 回帖 • 1 关注

最新标签