通过 CSS 让某些列表变成嵌套段落

本贴最后更新于 791 天前,其中的信息可能已经水流花落

之前 @iamqiz 发帖提到过这一需求:

调查: 是否支持段落缩进形成树状嵌套结构?(像 notion/wolai/flowus/logseq 那样)

调查 [v2 更新版]: 是否支持段落缩进形成树状嵌套结构?(像 notion/wolai/flowus/logseq 那样)

我写了个 CSS 满足了这一需求,效果如下:

image.png

以下是 CSS 代码。注意属性分为 hidedot 和 hidedots,后者多了个 s,表示批量隐藏小圆点,而前者表示只隐藏所选中的小圆点。

/* 点击想要隐藏的小圆点(或对应的列表项块标)->属性->添加一条名为hidedot的属性,值为1->确定 */ /* 注意hidedot末尾不带s表示非批量隐藏,即只隐藏所选的小圆点 */ /* 属性hidedot的值可取0,此时代表批量隐藏小圆点时排除掉选中的某个小圆点 */ /* ↓ 文字左移 ↓ */ .protyle-wysiwyg [data-node-id][custom-hidedot="1"].li>[data-node-id] { margin-left: 0 !important; } /* ↓ 隐藏小圆点,但小圆点原位置仍然可点击 ↓ */ .protyle-wysiwyg [data-node-id][custom-hidedot="1"].li>.protyle-action>svg>use:not(:hover) { opacity:0; /* 如果此处希望不可点击, 自行替换为 display:none; */ } /* ↓ 竖线稍微左移,更美观 ↓*/ .protyle-wysiwyg [data-node-id][custom-hidedot="1"].li:before { left:11px; /* 如果此处希望不显示竖线, 自行替换为 display:none; */ } /* ------------------------------------------------------------------------------------ */ /* 点击想要批量隐藏小圆点的无序列表或列表项的块标->属性->添加一条名为hidedots的属性,值填1即可->确定 */ /* 注意是hidedots,最后有个s */ /* 属性hidedots的值取0没有意义 */ /* ↓ 文字左移 ↓ */ .protyle-wysiwyg [custom-hidedots] [data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>[data-node-id], .protyle-wysiwyg [custom-hidedots][data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>[data-node-id] { margin-left: 0 !important; } /* ↓ 隐藏小圆点,但小圆点原位置仍然可点击 ↓ */ .protyle-wysiwyg [custom-hidedots] [data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>.protyle-action>svg>use:not(:hover), .protyle-wysiwyg [custom-hidedots][data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>.protyle-action>svg>use:not(:hover) { opacity:0; /* 如果此处希望不可点击, 自行替换为 display:none; */ } /* ↓ 竖线稍微左移,更美观 ↓*/ .protyle-wysiwyg [custom-hidedots] [data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li:before, .protyle-wysiwyg [custom-hidedots][data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li:before { left:11px; /* 如果此处希望不显示竖线, 自行替换为 display:none; */ }

怎样配置 CSS 呢?设置-> 外观-> 代码片段-> 添加 CSS-> 复制粘贴-> 确定。

第一次发帖标签是“思源笔记开发者”,哈哈。我还写了一些别的 CSS,一个是 pdf 暗黑模式页面背景改为纯黑,一个是指定部分图片在暗黑模式下反色显示,不过现在积分不够了,等积分多了再单独发帖介绍。

  • 思源笔记

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

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

    25481 引用 • 105375 回帖
5 操作
openAI 在 2023-03-14 11:35:48 更新了该帖
openAI 在 2023-03-14 11:33:32 更新了该帖
openAI 在 2023-03-14 11:22:25 更新了该帖
openAI 在 2023-03-14 11:06:11 更新了该帖 openAI 在 2023-03-14 02:33:46 更新了该帖

相关帖子

欢迎来到这里!

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

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

    不错。

    手动有点麻烦,能不能做到一次性全部替换掉。

    1 回复
  • i1356

    隐藏小圆点有个好处,就是在手机端可以一行多显示文字内容。

  • 全局隐藏小圆点的代码要简单得多:

    /* 全局隐藏列表小圆点 */ /* ↓ 文字左移 ↓ */ .protyle-wysiwyg [data-node-id][data-subtype="u"].li>[data-node-id] { margin-left: 0 !important; } /* ↓ 隐藏小圆点,但小圆点原位置仍然可点击 ↓ */ .protyle-wysiwyg [data-node-id][data-subtype="u"].li>.protyle-action>svg>use:not(:hover) { opacity:0; /* 如果希望此处不可点击, 自行替换为 display:none; */ } /* ↓ 竖线稍微左移,更美观 ↓*/ .protyle-wysiwyg [data-node-id][data-subtype="u"].li:before { left:11px; /* 如果希望此处不显示竖线, 自行替换为 display:none; */ }
    1 回复
    2 操作
    openAI 在 2023-03-14 13:52:51 更新了该回帖
    openAI 在 2023-03-14 11:34:50 更新了该回帖
  • i1356 1 评论

    感谢。能去掉竖线吗?有些地方竖线错乱了。

    image.png

    把 left:11px; 改成 display:none;
    openAI 2
  • 秀儿呀我的哥 😂

    这样看起来是有那味了

    不过没有小黑点,就没法区分段落和列表项了, 它俩在列表中 Tab 的效果不同,很有区分的必要

    我觉得把黑点换成减号, 然后再紧凑一点, 会好看点, 同时能区分段落和列表项

    1 回复
  • cyanc 1 赞同

    D 大说过没积分发帖,可以给他发邮件,他会给你加 😄

  • 写好了,我测试了一下没问题。

    将非全局隐藏的小圆点替换为短横线:

    /* 将非全局隐藏的小圆点替换为短横线。此段代码补充在(非全局)隐藏小圆点的CSS后面。 */ .protyle-wysiwyg [data-node-id][custom-hidedot="1"].li>div[data-type="NodeParagraph"].p>div:before, .protyle-wysiwyg [custom-hidedots] [data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>div[data-type="NodeParagraph"].p>div:before, .protyle-wysiwyg [custom-hidedots][data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>div[data-type="NodeParagraph"].p>div:before { content: "-"; }

    将全局隐藏的小圆点替换为短横线:

    /* 将全局隐藏的小圆点替换为短横线。此段代码补充在(全局)隐藏小圆点的CSS后面。 */ .protyle-wysiwyg [data-node-id][data-subtype="u"].li>div[data-type="NodeParagraph"].p>div:before { content: "-"; }

    感谢打赏积分!!😋

请输入回帖内容 ...

推荐标签 标签

  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 4 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    433 引用 • 1250 回帖 • 595 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 48 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖 • 2 关注
  • Gitea

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

    5 引用 • 16 回帖 • 2 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 30 关注
  • MyBatis

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

    173 引用 • 414 回帖 • 364 关注
  • CodeMirror
    2 引用 • 17 回帖 • 162 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • C++

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

    107 引用 • 153 回帖
  • 区块链

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

    92 引用 • 752 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 禅道

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

    6 引用 • 15 回帖 • 10 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 631 关注
  • 知乎

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

    10 引用 • 66 回帖 • 1 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 609 关注
  • Vue.js

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

    268 引用 • 666 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 58 关注
  • Linux

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

    952 引用 • 944 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 168 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 499 关注
  • Spark

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

    74 引用 • 46 回帖 • 563 关注