登录 注册

[css] 更改有序、无列表的颜色、加粗 -- 来源 Savor 主题

特别鸣谢 wilsons 大佬。

不足：

  1. 不同的主题可能会重叠，影响美观。这个 css 在 Savor 主题上是没问题的。
  2. 聚焦后，列表样式没有修改。
  3. 移动端会有缩进指示线和列表标对不齐的情况。并且由于一些原因可能导致移动端缩进后列表下沉。
  4. 列表子弹线的颜色会遮挡无序列表的颜色，见图二。

完美主义者慎用。代码由 AI 生成，目前因为蓝色和列表子弹线的颜色有点冲突，又改一下。

image.png

PixPin20250109155239.png

代码：

.list[data-subtype="o"] {
    counter-reset: o1 0 o2 0 o3 0;
}

[data-node-index] > [data-subtype="o"][data-type="NodeListItem"]::after {
    content: attr(data-marker) !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
    font-weight: bold !important; /* 加粗 */
    position: absolute;
    left: 9px;
    top: 3px;
    pointer-events: none;
}

.protyle-wysiwyg .li[data-subtype="o"] > .protyle-action,
.protyle-wysiwyg .li[data-subtype="o"] > .protyle-action:hover {
    color: transparent !important;
}

.protyle-wysiwyg .li[data-subtype="o"] > .protyle-action::after {
    color: #db4d52 !important; /* 修改为红橙色调 */
    font-weight: bold !important; /* 加粗 */
    padding: 3px 2px;
    width: 24px;
    display: flex;
    justify-content: center;
    position: absolute;
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: counter(o2, lower-latin) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, lower-roman) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o1;
    content: counter(o1, decimal) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

/* 继续为更深的层级添加相同的模式... */

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: counter(o2, lower-latin) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, lower-roman) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o1;
    content: counter(o1, decimal) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

/* ...继续为更深的层级添加相同的模式 */

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: counter(o2, lower-latin) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, lower-roman) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o1;
    content: counter(o1, decimal) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

/* 最深层级 */
.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: counter(o2, lower-latin) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, lower-roman) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}



[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;
    font-family: Arial;
    content: "•";
    position: absolute;
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "◦";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "▪";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "•";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "◦";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "▪";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "•";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "◦";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "▪";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "•";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "◦";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "▪";
    color: #db4d52; /* 修改颜色为红橙色调 */
}
​
  • 思源笔记

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

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

    26207 引用 • 108894 回帖 • 3 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    196 引用 • 1399 回帖
  • Q&A

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

    10070 引用 • 45749 回帖 • 67 关注
11 操作
Afterglow 在 2025-01-09 15:54:21 更新了该帖
Afterglow 在 2025-01-03 11:40:40 更新了该帖
Afterglow 在 2025-01-03 11:38:23 更新了该帖
Afterglow 在 2024-12-22 23:27:05 更新了该帖 JeffreyChen 在 2024-12-21 23:59:00 更新了该帖 Afterglow 在 2024-12-19 20:21:52 更新了该帖 Afterglow 在 2024-12-09 07:52:57 更新了该帖 Afterglow 在 2024-12-08 23:59:13 更新了该帖 JeffreyChen 在 2024-10-12 01:21:18 更新了该帖 Afterglow 在 2024-10-11 20:52:30 更新了该帖 Afterglow 在 2024-10-11 20:52:09 更新了该帖
11 操作
5 回帖
3
662 362 4 150 2 144

相关帖子

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

    加上这个试试

    .protyle-wysiwyg [data-node-id].li[data-subtype="o"]>.protyle-action,
.protyle-wysiwyg [data-node-id].li[data-subtype="o"]>.protyle-action:hover{
    color: #007BFF; /* 修改为好看的蓝色 */
    font-weight: bold; /* 加粗 */
}
​
5 回帖
[css] 更改有序、无列表的颜色、加粗 -- 来源 Savor 主题

欢迎来到这里！

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

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

    加上这个试试

    .protyle-wysiwyg [data-node-id].li[data-subtype="o"]>.protyle-action,
.protyle-wysiwyg [data-node-id].li[data-subtype="o"]>.protyle-action:hover{
    color: #007BFF; /* 修改为好看的蓝色 */
    font-weight: bold; /* 加粗 */
}
​
    1 回复
  • Afterglow • via SCMR-W09
    订阅者 恶龙 作者

    谢谢大佬！😋 🎉

  • Mayrain •

    大佬，这个代码似乎现在不能用在最新版？我试了一下，有序列表没变化啊

    image.png

    2 回复
  • Afterglow • via SCMR-W09
    订阅者 恶龙 作者

    我这边 savor 主题还是可以使用的哦。

  • Afterglow • via SCMR-W09
    订阅者 恶龙 作者

    用默认主题是没有问题的。有的主题确实存在不兼容的情况，例如 Asri ，可能你需要去看看对应主题的代码了。

    另，其实不是大佬，hhh。

Afterglow
回帖
322
 帖子
97
 积分
4900

近期热议

推荐标签 标签

  • 博客

    记录并分享人生的经历。

    273 引用 • 2389 回帖
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 71 关注
  • Office

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

    5 引用 • 34 回帖 • 1 关注
  • 域名

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

    44 引用 • 208 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 4 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖
  • C++

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

    108 引用 • 153 回帖
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖
  • Git

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

    211 引用 • 358 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 16 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 243 关注
  • sts
    2 引用 • 2 回帖 • 241 关注
  • JavaScript

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

    730 引用 • 1282 回帖
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    497 引用 • 934 回帖 • 1 关注
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1395 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖
  • Thymeleaf

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

    11 引用 • 19 回帖 • 393 关注
  • 微信

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

    133 引用 • 796 回帖 • 1 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 678 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖
  • golang

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

    500 引用 • 1396 回帖 • 247 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 765 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 119 关注
  • SendCloud

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

    2 引用 • 8 回帖 • 508 关注
  • 资讯

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

    56 引用 • 85 回帖
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖

最新标签