登录 注册

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

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

需要的样式如下图：

image.png

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

  • 思源笔记

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

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

    26736 引用 • 111380 回帖 • 2 关注
  • Q&A

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

    10323 引用 • 46868 回帖 • 61 关注
北京 位置 16 回帖
9
7
1.4k 131 18 935 3 22 1 264

相关帖子

被采纳的回答
  • JeffreyChen •
    付费者 支持者 捐赠者

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

    （刚刚更新了一下回帖，现在肯定行了）

    /* 自定义无序列表样式 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: "◦";
}
​
16 回帖
求一个无序列表样式的 CSS 代码片段

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • sweesalt •
    订阅者 作者

    哪位大佬帮写一个啊 🙏

  • JeffreyChen •
    付费者 支持者 捐赠者

    写好了，先试试看行不行，没 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 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    我不明白你那里是什么情况，我这里是没问题的：

    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 •
  • JeffreyChen •
    付费者 支持者 捐赠者

    你新开一个工作空间测试一下看看？

    1 回复
  • sweesalt •
    订阅者 作者

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

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

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

    1 回复
  • sweesalt •
    订阅者 作者

    按你说的试了，还是不行啊？

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    可能之前的代码的缩进有点问题，我稍微改了一下，你再用这个试试看：

    /* 自定义无序列表样式 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 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

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

    （刚刚更新了一下回帖，现在肯定行了）

    /* 自定义无序列表样式 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 更新了该回帖
  • JeffreyChen •
    付费者 支持者 捐赠者

    想要代码行数少一点的话，就用这个：

    /* 自定义无序列表样式 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 •
    订阅者 作者

    好的，这两天辛苦你了，谢谢！

请输入回帖内容 ...
sweesalt
北京
回帖
288
 帖子
72
 积分
1238

近期热议

推荐标签 标签

  • golang

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

    500 引用 • 1396 回帖 • 252 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    730 引用 • 1284 回帖
  • 音乐

    你听到信仰的声音了么？

    62 引用 • 512 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 5 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖 • 2 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    948 引用 • 1460 回帖 • 3 关注
  • GitLab

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

    46 引用 • 72 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    56 引用 • 85 回帖 • 3 关注
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 26 关注
  • AWS
    11 引用 • 28 回帖 • 3 关注
  • 学习

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

    173 引用 • 541 回帖
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1432 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖 • 1 关注
  • Mac

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

    167 引用 • 597 回帖
  • Gitea

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

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

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    46 引用 • 114 回帖 • 159 关注
  • 链滴

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

    记录生活，连接点滴

    187 引用 • 3914 回帖
  • Vditor

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

    378 引用 • 1867 回帖 • 2 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    84 引用 • 414 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 563 关注
  • 新人

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

    52 引用 • 228 回帖
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖 • 1 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • Typecho

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

    12 引用 • 67 回帖 • 447 关注
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1062 引用 • 3455 回帖 • 148 关注
  • OnlyOffice
    4 引用 • 18 关注

最新标签