登录 注册

求助 JS 使每级有序（无序）列表的字体大小，按层级缩减

本贴最后更新于 200 天前，其中的信息可能已经时移俗易

image.png

想要做到图片效果，目前需要手动选中每行，调整字体大小，很繁琐

因为思源没有 ob 的缩减层级

而最近使用有序列表和无序列表做大纲的时候特别多，一整篇近千字都是按照有序列表来写，通篇排版下来，字数太多，就感觉很难找到层级重点（左边那个象征层级的小点儿缺乏辨识度）

这个与大纲的层级段落还有点区别——大纲层级字体有颜色，有独立的大纲面板

而当这种有序列表 or 无效列表，因为没有独立面板来管理，在它特别多的时候，看起来很费眼

因此，希望大神帮忙写个 JS（这个是能做到的吗？）

我希望达到的效果是。

有序 or 无序列表

第一级的字体大小是 36px

第二级 30px

第三级 28px

第四季 24px

（只是暂时这么一想，层级的字体大小希望后续可以自调）

  • 思源笔记

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

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

    28446 引用 • 119768 回帖
  • Q&A

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

    11155 引用 • 50651 回帖 • 52 关注
100 悬赏
5 收藏
2 回帖
202 90 5 15 1 91

相关帖子

被采纳的回答
  • wilsons • • 3
    付费者 捐赠者

    css 就行，试试这个，还可以继续加更多级

    .protyle-wysiwyg  .li {
    font-size: 36px;
}
.protyle-wysiwyg  .li .li {
    font-size: 30px;
}
.protyle-wysiwyg  .li .li .li {
    font-size: 28px;
}
.protyle-wysiwyg  .li .li .li .li{
    font-size: 24px;
}
.protyle-wysiwyg  .li .li .li .li .li{
    font-size: 18px;
}

    image.png

    如果不想改变圆点大小，可以这样

    .protyle-wysiwyg  .li [contenteditable="true"]{
    font-size: 36px;
}
.protyle-wysiwyg  .li .li [contenteditable="true"]{
    font-size: 30px;
}
.protyle-wysiwyg  .li .li .li [contenteditable="true"]{
    font-size: 28px;
}
.protyle-wysiwyg  .li .li .li .li [contenteditable="true"]{
    font-size: 24px;
}
.protyle-wysiwyg  .li .li .li .li .li [contenteditable="true"]{
    font-size: 18px;
}

    image.png

    如果兼容预览模式

    .protyle-wysiwyg .li [contenteditable="true"],
.b3-typography li p{
    font-size: 36px;
}
.protyle-wysiwyg .li .li [contenteditable="true"],
.b3-typography li li p{
    font-size: 30px;
}
.protyle-wysiwyg .li .li .li [contenteditable="true"],
.b3-typography li li li p{
    font-size: 28px;
}
.protyle-wysiwyg .li .li .li .li [contenteditable="true"],
.b3-typography li li li li p{
    font-size: 24px;
}
.protyle-wysiwyg .li .li .li .li .li [contenteditable="true"],
.b3-typography li li li li li p{
    font-size: 18px;
}
2 回帖
求助 JS 使每级有序（无序）列表的字体大小，按层级缩减

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • wilsons • • 3 • 2 评论
    付费者 捐赠者

    css 就行，试试这个，还可以继续加更多级

    .protyle-wysiwyg  .li {
    font-size: 36px;
}
.protyle-wysiwyg  .li .li {
    font-size: 30px;
}
.protyle-wysiwyg  .li .li .li {
    font-size: 28px;
}
.protyle-wysiwyg  .li .li .li .li{
    font-size: 24px;
}
.protyle-wysiwyg  .li .li .li .li .li{
    font-size: 18px;
}

    image.png

    如果不想改变圆点大小，可以这样

    .protyle-wysiwyg  .li [contenteditable="true"]{
    font-size: 36px;
}
.protyle-wysiwyg  .li .li [contenteditable="true"]{
    font-size: 30px;
}
.protyle-wysiwyg  .li .li .li [contenteditable="true"]{
    font-size: 28px;
}
.protyle-wysiwyg  .li .li .li .li [contenteditable="true"]{
    font-size: 24px;
}
.protyle-wysiwyg  .li .li .li .li .li [contenteditable="true"]{
    font-size: 18px;
}

    image.png

    如果兼容预览模式

    .protyle-wysiwyg .li [contenteditable="true"],
.b3-typography li p{
    font-size: 36px;
}
.protyle-wysiwyg .li .li [contenteditable="true"],
.b3-typography li li p{
    font-size: 30px;
}
.protyle-wysiwyg .li .li .li [contenteditable="true"],
.b3-typography li li li p{
    font-size: 28px;
}
.protyle-wysiwyg .li .li .li .li [contenteditable="true"],
.b3-typography li li li li p{
    font-size: 24px;
}
.protyle-wysiwyg .li .li .li .li .li [contenteditable="true"],
.b3-typography li li li li li p{
    font-size: 18px;
}
    1 操作
    wilsons 在 2025-06-05 11:31:42 更新了该回帖
    太神啦，大大，爱你 ❤。这个层级可以调增字体大小，我感觉比 ob 那个段落缩减还要好用。兼具了排版和整齐度(～￣▽￣)～
    Floria233 • • 1 赞同
    @Floria233 最下面加了兼容预览模式
    wilsons •
  • Imuvux • • 1 评论
    付费者

    可以直接在列表里使用标题。

    对，这也是一种解法，不过我的五级标题字体特别大，还有颜色，用太多了感觉花哨，哈哈哈
    Floria233 •
Floria233
回帖
222
 帖子
55
 积分
460

近期热议

推荐标签 标签

  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    502 引用 • 1397 回帖 • 240 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    23 引用 • 22 回帖
  • 导航

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

    45 引用 • 177 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 44 关注
  • Spark

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

    74 引用 • 46 回帖 • 563 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    308 引用 • 773 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 429 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    45 引用 • 44 回帖 • 1 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    134 引用 • 1128 回帖 • 93 关注
  • 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.

    8 引用 • 69 回帖 • 6 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖 • 6 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    960 引用 • 946 回帖
  • Typecho

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

    12 引用 • 67 回帖 • 436 关注
  • 京东

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

    14 引用 • 102 回帖 • 260 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 693 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 203 关注
  • Gitea

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

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

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 531 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 475 关注
  • 阿里云

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

    85 引用 • 324 回帖
  • Vim

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

    29 引用 • 66 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 60 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 707 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 413 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • 支付宝

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

    29 引用 • 347 回帖 • 2 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注

最新标签