[css] 有序列表样式分享(1.→(1)→A.→i.)

基于 Savor 主题有序列表样式,GPT 修改,自己测试了一下能用:

版本一:适用 Savor、Odyssey 主题(完美适配)

/* 隐藏原始编号 */ .li[data-subtype="o"] .li[data-subtype="o"] .protyle-action--order { color: transparent !important; } /* 动态生成编号的颜色 */ .li[data-subtype="o"] .li[data-subtype="o"] .protyle-action::after { color: var(--b3-theme-on-background); } /* 初始化计数器 */ .list[data-subtype="o"] { counter-reset: o1 0 o2 0 o3 0 o4 0; } /* 第一层嵌套:阿拉伯数字 (1. 2. 3.) */ .li[data-subtype="o"] > .protyle-action::after { counter-increment: o1; content: counter(o1, decimal) "."; position: absolute; padding: 3px 2px; width: 24px; display: flex; justify-content: center; } /* 第二层嵌套:中文括号 + 阿拉伯数字 ((1) (2) (3)) */ .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o2; content: "(" counter(o2, decimal) ")"; position: absolute; } /* 第三层嵌套:大写拉丁字母 (A. B. C.) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o3; content: counter(o3, upper-alpha) "."; position: absolute; } /* 第四层嵌套:小写罗马数字 (i. ii. iii.) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o4; content: counter(o4, lower-roman) "."; position: absolute; } /* 循环更深层次嵌套,按四层规则重新开始 */ /* 第一层规则:阿拉伯数字 (循环) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o1; content: counter(o1, decimal) "."; position: absolute; } /* 第二层规则:中文括号 + 阿拉伯数字 (循环) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o2; content: "(" counter(o2, decimal) ")"; position: absolute; } /* 第三层规则:大写拉丁字母 (循环) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o3; content: counter(o3, upper-alpha) "."; position: absolute; } /* 第四层规则:小写罗马数字 (循环) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o4; content: counter(o4, lower-roman) "."; position: absolute; }

版本二:其他主题(已知问题:方框阴影错位)

202411182234.png

/* 隐藏原始编号 */ .li[data-subtype="o"] .li[data-subtype="o"] .protyle-action--order { color: transparent !important; } /* 动态生成编号的颜色 */ .li[data-subtype="o"] .li[data-subtype="o"] .protyle-action::after { color: var(--b3-theme-on-background); } /* 初始化计数器 */ .list[data-subtype="o"] { counter-reset: o1 0 o2 0 o3 0 o4 0; } /* 第一层嵌套:阿拉伯数字 (1. 2. 3.) */ .li[data-subtype="o"] > .protyle-action::after { counter-increment: o1; content: counter(o1, decimal) "."; position: absolute; padding: 3px 2px; width: 24px; display: flex; justify-content: center; margin: -20px 0 0 -8px !important; } /* 第二层嵌套:中文括号 + 阿拉伯数字 ((1) (2) (3)) */ .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o2; content: "(" counter(o2, decimal) ")"; position: absolute; } /* 第三层嵌套:大写拉丁字母 (A. B. C.) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o3; content: counter(o3, upper-alpha) "."; position: absolute; } /* 第四层嵌套:小写罗马数字 (i. ii. iii.) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o4; content: counter(o4, lower-roman) "."; position: absolute; } /* 循环更深层次嵌套,按四层规则重新开始 */ /* 第一层规则:阿拉伯数字 (循环) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o1; content: counter(o1, decimal) "."; position: absolute; } /* 第二层规则:中文括号 + 阿拉伯数字 (循环) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o2; content: "(" counter(o2, decimal) ")"; position: absolute; } /* 第三层规则:大写拉丁字母 (循环) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o3; content: counter(o3, upper-alpha) "."; position: absolute; } /* 第四层规则:小写罗马数字 (循环) */ .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after { counter-increment: o4; content: counter(o4, lower-roman) "."; position: absolute; }

附 GPT 调教提示语,有需要的朋友可以根据自己需求修改:

第一句:

帮我分析 CSS 代码

第二句:

该 CSS 代码片段适用于“思源笔记”:(附上参考代码)

第三句:

请基于源代码修改:(注意!基于源代码修改,无需优化!)

第一层嵌套: 使用阿拉伯数字 (e.g., 1. 2. 3.)。

第二层嵌套: 使用中文括号 + 阿拉伯数字 (e.g., (1) (2) (3))。

第三层嵌套: 使用大写拉丁字母 (e.g., A. B. C.)。 第四层嵌套:使用小写罗马数字 (e.g., i. ii. iii.)。

层级越深,编号的规则在这四种格式之间循环。

  • 思源笔记

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

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

    23470 引用 • 95061 回帖
  • 代码片段

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

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

    98 引用 • 672 回帖
3 操作
JOYCELEEEEE 在 2024-11-18 23:35:01 更新了该帖
JOYCELEEEEE 在 2024-11-18 23:25:19 更新了该帖
JOYCELEEEEE 在 2024-11-18 22:29:44 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • wenbocn

    image.png

    发现错行了,可能因为不是默认字体的原因,请问能调整吗?

    1 回复
  • JOYCELEEEEE

    已更新代码,试试看。

    1 回复
    1 操作
    JOYCELEEEEE 在 2024-11-18 22:31:20 更新了该回帖
  • EmptyLight 1

    我印象里见过同样的问题,找了一下写过的代码,应该是 margin 这一行修正的。可以加上 margin 这行试试。

    .li[data-subtype="o"] > .protyle-action::after { padding: 3px 2px; width: 24px; display: flex; justify-content: center; margin: -20px 0 0 -8px !important; }
    1 回复
  • JOYCELEEEEE 4 评论

    的确,我把代码放新空间里试了下才发现有缺陷 😂

    但是加上代码后似乎还有个小问题:阴影方块有错位

    202411182234.png

    1 操作
    JOYCELEEEEE 在 2024-11-18 22:35:32 更新了该回帖
    这个错位我没有解决,这个是把整个序号元素上移之后实现的,相当于原本的序号上移了 8px
    EmptyLight
    新加的修正问题代码和原本的第一层嵌套的选择器是一样的,可以把 margin 一行加进第一层嵌套的括号里面,把后面修正的代码整个删掉
    EmptyLight
    @EmptyLight 最先的代码在 Savor、Odyssey 主题能直接适配,应该是 R 佬针对自己的主题有特殊修改(毕竟源代码就是从他那里扒的)。
    JOYCELEEEEE
    @JOYCELEEEEE 我的代码实现也是先抄的 Savor,然后自己检查哪里有问题,其他地方的代码就没有看,说不定是 Savor 有特殊修改
    EmptyLight
  • NieJianYing via macOS

    有办法导出时也能按照样式导出吗

    1 回复
  • JOYCELEEEEE

    pdf 可以按样式导出,其他的格式没有测试过,你可以自己试试看。

  • ic

    原始编号没有隐藏怎么回事?

  • noitejun

    想要变成这样,该如何调整,AI 试了没用,感谢 🙏 :
    1.1

    1.1.1

    1.2

请输入回帖内容 ...

推荐标签 标签

  • danl
    150 关注
  • Access
    1 引用 • 3 回帖 • 1 关注
  • Word
    13 引用 • 40 回帖 • 1 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 754 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖 • 1 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 488 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 2 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 176 关注
  • 以太坊

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

    34 引用 • 367 回帖 • 1 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 3 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    7 引用 • 40 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 6 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 364 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 41 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    577 引用 • 3533 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    159 引用 • 3804 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 89 关注
  • 微信

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

    132 引用 • 796 回帖
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 277 关注
  • Firefox

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

    8 引用 • 30 回帖 • 415 关注
  • Flume

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

    9 引用 • 6 回帖 • 645 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 533 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 532 关注