登录 注册

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

需要的样式如下图：

image.png

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

  • 思源笔记

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

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

    19112 引用 • 71861 回帖
  • Q&A

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

    6670 引用 • 29916 回帖 • 242 关注
北京 位置 16 回帖
9
7
344 101 13 215 1 13

相关帖子

被采纳的回答
  • 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 代码片段

欢迎来到这里！

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

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

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

  • 其他回帖
  • 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 更新了该回帖
  • 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 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

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

    1 回复
  • 查看全部回帖
intelion
北京
回帖
190
 帖子
45
 积分
5932

近期热议

推荐标签 标签

  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    205 引用 • 357 回帖
  • JavaScript

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

    711 引用 • 1173 回帖 • 154 关注
  • IPFS

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

    20 引用 • 245 回帖 • 233 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 37 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 546 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 202 关注
  • Vim

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

    27 引用 • 66 回帖 • 1 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 682 关注
  • Mac

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

    164 引用 • 594 回帖
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 2 关注
  • Sandbox

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

    374 引用 • 1217 回帖 • 580 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 440 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    15 引用 • 7 回帖 • 2 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 233 关注
  • Pipe

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

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

    131 引用 • 1114 回帖 • 148 关注
  • Kubernetes

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

    108 引用 • 54 回帖 • 1 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 156 关注
  • ReactiveX

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

    1 引用 • 2 回帖 • 123 关注
  • Solidity

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

    3 引用 • 18 回帖 • 356 关注
  • 自由行
    • 4 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    165 引用 • 407 回帖 • 525 关注
  • 深度学习

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

    40 引用 • 40 回帖
  • FFmpeg

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

    22 引用 • 31 回帖 • 2 关注
  • GitBook

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

    3 引用 • 8 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    57 引用 • 22 回帖 • 2 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    333 引用 • 323 回帖 • 56 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 55 关注

最新标签