求一个无序列表样式的 CSS 代码片段

本贴最后更新于 440 天前,其中的信息可能已经渤澥桑田

需要的样式如下图:

image.png

注:三级及之后使用相同符号。

  • 思源笔记

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

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

    25005 引用 • 103018 回帖
  • Q&A

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

    9525 引用 • 43373 回帖 • 104 关注
被采纳的回答
  • 我搞明白了,我的列表跟你的有一点点不一样,我单独适配了三种情况,现在这个代码应该行了:

    (刚刚更新了一下回帖,现在肯定行了)

    /* 自定义无序列表样式 https://ld246.com/article/1706265880167?r=a2930610542 */ /* 无序列表块 */ [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action svg{ color:transparent; } [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action::before { font-size: 1.5em; line-height: 1; margin-bottom: 0px; margin-left:13px; font-family: Arial; content: "▪"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "•"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "◦"; } /* 嵌入块 */ [class="protyle-wysiwyg__embed"]>.li[data-subtype="u"]>.protyle-action svg{ color:transparent; } [class="protyle-wysiwyg__embed"]>.li[data-subtype="u"]>.protyle-action::before { font-size: 1.5em; line-height: 1; margin-bottom: 0px; margin-left:13px; font-family: Arial; content: "▪"; } [class="protyle-wysiwyg__embed"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "•"; } [class="protyle-wysiwyg__embed"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "◦"; } /* 浮窗 */ [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>.li[data-subtype="u"]>.protyle-action svg{ color:transparent; } [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>.li[data-subtype="u"]>.protyle-action::before { font-size: 1.5em; line-height: 1; margin-bottom: 0px; margin-left:13px; font-family: Arial; content: "▪"; } [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "•"; } [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "◦"; }

欢迎来到这里!

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

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

    哪位大佬帮写一个啊 🙏

  • 写好了,先试试看行不行,没 BUG 的话请采纳:

    /* 自定义无序列表样式 https://ld246.com/article/1706265880167?r=a2930610542 */ [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action svg{ color:transparent; } [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action::before { font-size: 1.5em; line-height: 1; margin-bottom: 0px; margin-left:13px; font-family: Arial; content: "▪"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "•"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "◦"; }

    代码修改自:https://github.com/royc01/notion-theme/blob/d3c959bea725f37d631934959c9e9d2613fbfeb3/style/module/unordered-list.css

    1 回复
    1 操作
    JeffreyChen 在 2024-01-31 13:43:58 更新了该回帖
  • sweesalt

    在嵌入块和引用、链接块时第 1 级显示异常,如图,麻烦帮看一下:

    image.png

    1 回复
  • 我不明白你那里是什么情况,我这里是没问题的:

    image.png

    可能跟什么插件或者代码片段冲突了,每行都加 !important 试试:

    /* 自定义无序列表样式 https://ld246.com/article/1706265880167?r=a2930610542 */ [data-subtype="u"] > .li[data-subtype="u"] > .protyle-action svg { color: transparent !important; } [data-subtype="u"] > .li[data-subtype="u"] > .protyle-action::before { font-size: 1.5em !important; line-height: 1 !important; margin-bottom: 0px !important; margin-left: 13px !important; font-family: Arial !important; content: "▪" !important; } [data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before { content: "•" !important; } [data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before { content: "◦" !important; }
    1 回复
  • sweesalt

    加!important 也不行,关闭了所有插件和 CSS 代码片段,只保留了这一个,还是不行呢 😭 使用的默认主题

    1 回复
  • sweesalt 1 评论

    还有可能是什么原因?

    是不是版本的问题?更新到最新版试试
    openAI
  • 你新开一个工作空间测试一下看看?

    1 回复
  • sweesalt

    新空间测试没有问题,那这是怎么回事呢?

    1 回复
  • 那你在原先的工作空间先把其他代码片段和插件都关掉,只保留开启这个代码片段,然后重启一下思源试试(重载窗口)

    1 回复
  • sweesalt

    按你说的试了,还是不行啊?

    1 回复
  • 可能之前的代码的缩进有点问题,我稍微改了一下,你再用这个试试看:

    /* 自定义无序列表样式 https://ld246.com/article/1706265880167?r=a2930610542 */ [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action svg{ color:transparent; } [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action::before { font-size: 1.5em; line-height: 1; margin-bottom: 0px; margin-left:13px; font-family: Arial; content: "▪"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "•"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "◦"; }
    1 回复
  • sweesalt

    新代码测试还是不行(关闭插件和其它代码,并刷新了窗口),但测试中发现一个现象:点击嵌入块查看浮动窗口也是不正常的,但点击「退出聚焦」浮动窗口显示就正常了,操作视频如下。

    1 回复
  • 我搞明白了,我的列表跟你的有一点点不一样,我单独适配了三种情况,现在这个代码应该行了:

    (刚刚更新了一下回帖,现在肯定行了)

    /* 自定义无序列表样式 https://ld246.com/article/1706265880167?r=a2930610542 */ /* 无序列表块 */ [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action svg{ color:transparent; } [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action::before { font-size: 1.5em; line-height: 1; margin-bottom: 0px; margin-left:13px; font-family: Arial; content: "▪"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "•"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "◦"; } /* 嵌入块 */ [class="protyle-wysiwyg__embed"]>.li[data-subtype="u"]>.protyle-action svg{ color:transparent; } [class="protyle-wysiwyg__embed"]>.li[data-subtype="u"]>.protyle-action::before { font-size: 1.5em; line-height: 1; margin-bottom: 0px; margin-left:13px; font-family: Arial; content: "▪"; } [class="protyle-wysiwyg__embed"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "•"; } [class="protyle-wysiwyg__embed"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "◦"; } /* 浮窗 */ [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>.li[data-subtype="u"]>.protyle-action svg{ color:transparent; } [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>.li[data-subtype="u"]>.protyle-action::before { font-size: 1.5em; line-height: 1; margin-bottom: 0px; margin-left:13px; font-family: Arial; content: "▪"; } [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "•"; } [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "◦"; }
    1 回复
    1 操作
    JeffreyChen 在 2024-01-31 16:00:57 更新了该回帖
  • 想要代码行数少一点的话,就用这个:

    /* 自定义无序列表样式 https://ld246.com/article/1706265880167?r=a2930610542 */ /* 无序列表块、嵌入块、浮窗聚焦 */ [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action svg, [class="protyle-wysiwyg__embed"]>.li[data-subtype="u"]>.protyle-action svg, [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>.li[data-subtype="u"]>.protyle-action svg{ color:transparent; } [data-subtype="u"]>.li[data-subtype="u"]>.protyle-action::before, [class="protyle-wysiwyg__embed"]>.li[data-subtype="u"]>.protyle-action::before, [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>.li[data-subtype="u"]>.protyle-action::before{ font-size: 1.5em; line-height: 1; margin-bottom: 0px; margin-left:13px; font-family: Arial; content: "▪"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before, [class="protyle-wysiwyg__embed"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before, [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "•"; } [data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before, [class="protyle-wysiwyg__embed"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before, [class="protyle-wysiwyg protyle-wysiwyg--attr"][data-doc-type="NodeListItem"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before{ content: "◦"; }
    1 回复
  • sweesalt

    真的行了,厉害 👍 ,非常感谢!

  • sweesalt

    好的,这两天辛苦你了,谢谢!

请输入回帖内容 ...

推荐标签 标签

  • Love2D

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

    14 引用 • 53 回帖 • 551 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 177 关注
  • FreeMarker

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

    23 引用 • 20 回帖 • 454 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 119 关注
  • Maven

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

    187 引用 • 318 回帖 • 253 关注
  • 叶归
    5 引用 • 16 回帖 • 7 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 78 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖 • 1 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 229 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 623 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 590 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 2 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 177 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 499 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • AWS
    11 引用 • 28 回帖 • 9 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 36 关注
  • 微信

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

    132 引用 • 796 回帖
  • jsoup

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

    6 引用 • 1 回帖 • 487 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 434 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 643 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    181 引用 • 821 回帖
  • ActiveMQ

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

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

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

    11 引用 • 19 回帖 • 387 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    169 引用 • 595 回帖 • 1 关注