【已解决】如何用 CSS 实现多彩有序列表

疑问解答
1

image
如何使用 CSS 片段来实现上图彩色的序号？

2

一般可以找个现成例子, 照着改, 比如 Blue Topaz 有个 “启用彩色有序列表符号” 就是类似这种样式, 知道这功能后去 css 里搜这段中文, 然后就会找到关键词 colorful-ordered-list, 然后学习他的就行了

3

:ok_hand:
没接触过 CSS ，代码太多看的头晕:face_with_spiral_eyes:
下载主题研究一下，多谢指导

4

精确高效的实现任意样式, 可能有点难,
但是利用现成样式, 在基础上做调整, 抄抄改改, 其实也并不难

论坛里有一些教程供参考

CSS 入门点拨 - 每日闲聊
样式修改、主题制作 深入教程-经验分享 - 经验分享

楼主可以试试, 遇到困难也欢迎随时提问~

2 个赞
5

特别感谢，在 Blue Topaz 主题里面搬运一些代码，已经实现我想要的效果

Snipaste_2024-04-20_18-43-47
Snipaste_2024-04-20_18-43-47430×1160 36.2 KB

其中遇到一些困难，在修改无序列表颜色的时候，第一列一直未能显示我设置的颜色

    .has-list-bullet .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line>span.cm-formatting:first-of-type .list-bullet::after {
        color: var(--rainbow-1);
    }

后来参考 Obsidian主题样式修改半入门教学 这篇文章，尝试

    --list-ul-marker-color:var(--rainbow-1);

才成功改变其颜色

结果已经完美了，但不理解为什么无序列表其他层级都能修改颜色，唯独第一层不起作用，在开发者模式中显示调用的颜色是 --list-ul-marker-color

2 个赞
6

我理解这是说, 自己定义了一个 --rainbow-1: 颜色, 且配置好了这段 css,
但是发现, 无序列表的圆点 (特指无缩进最外层的) 非要展示它从 --list-ul-marker-color: 得来的颜色, 忽视了用户的 --rainbow-1: 颜色

如果是这个意思, 可能得具体看啥主题了, 我这个是默认明亮主题, 它引用了 var(--list-marker-color)

image
image1193×684 47 KB

这例子没明确帮助, 但可看出, 情况还是挺复杂的… 推测原因也许是, color: var(--rainbow-1) 这一条的选择器权重不够高, 实际用到的是一堆更优先的 color: xxx; 规则

可以先加个 !important 试试, 不行就得仔细研究了

1 个赞
7

你的理解没错，就是这个意思
确实太复杂，都不知道选择器权重去哪看
不过目前也实现我想要的效果了，先这样，以后有空慢慢学习 CSS
再次感谢！

1 个赞
8

可以参考下该作者的CSS

9

源代码有点复杂，有序列表是编辑阅读两套不同颜色，想统一。
这样的颜色，使用hue-rotate的

color: var(--list-colorful-marker);
  filter: hue-rotate(120deg);

怎么转成这样的

color: hsl(calc(var(--accent-h) + 180),var(--accent-s),calc(var(--accent-l) * 0.95));

试过截图，吸取rgb色值直接替换，有点接近但不完全一致。dark模式还可以，light模式就相差很远，很奇怪。

10

您好，请问这个彩色列表的CSS，可以分享一下吗？

11 
body {
    --rainbow-1: #E06C75;
    --rainbow-2: #D19A66;
    --rainbow-3: #98C379;
    --rainbow-4: #56B6C2;
    --rainbow-5: #AA7FB7;
    --rainbow-6: #C678DD;
    /* 彩色有序列表符号 */
    ol li::marker,
    ol li::before,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line div.cm-fold-indicator ~ span.cm-formatting.cm-formatting-list-ol,
    .cm-formatting.cm-formatting-list.cm-formatting-list-ol,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line span.cm-hmd-list-indent ~ span.cm-formatting.cm-formatting-list-ol {
        color: var(--rainbow-1);
    }

    :is(ul, ol) ol li::marker,
    :is(ul, ol) ol li::before,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-2.cm-line div.cm-fold-indicator ~ span.cm-formatting.cm-formatting-list-ol,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-2.cm-line span.cm-hmd-list-indent ~ span.cm-formatting.cm-formatting-list-ol {
        color: var(--rainbow-2);
    }

    :is(ul, ol) :is(ul, ol) ol li::marker,
    :is(ul, ol) :is(ul, ol) ol li::before,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-3.cm-line div.cm-fold-indicator ~ span.cm-formatting.cm-formatting-list-ol,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-3.cm-line span.cm-hmd-list-indent ~ span.cm-formatting.cm-formatting-list-ol {
        color: var(--rainbow-3);
    }

    :is(ul, ol) :is(ul, ol) :is(ul, ol) ol li::marker,
    :is(ul, ol) :is(ul, ol) :is(ul, ol) ol li::before,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-4.cm-line div.cm-fold-indicator ~ span.cm-formatting.cm-formatting-list-ol,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-4.cm-line span.cm-hmd-list-indent ~ span.cm-formatting.cm-formatting-list-ol {
        color: var(--rainbow-4);
    }

    :is(ul, ol)  :is(ul, ol) :is(ul, ol) :is(ul, ol) ol li::marker,
    :is(ul, ol) :is(ul, ol) :is(ul, ol) :is(ul, ol) ol li::before,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-5.cm-line div.cm-fold-indicator ~ span.cm-formatting.cm-formatting-list-ol,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-5.cm-line span.cm-hmd-list-indent ~ span.cm-formatting.cm-formatting-list-ol {
        color: var(--rainbow-5);
    }

    :is(ul, ol) :is(ul, ol) :is(ul, ol) :is(ul, ol) :is(ul, ol) ol li::marker,
    :is(ul, ol)  :is(ul, ol) :is(ul, ol) :is(ul, ol)  :is(ul, ol) ol li::before,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-6.cm-line div.cm-fold-indicator ~ span.cm-formatting.cm-formatting-list-ol,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-6.cm-line span.cm-hmd-list-indent ~ span.cm-formatting.cm-formatting-list-ol {
        color: var(--rainbow-6);
    }

    /* 彩色无序列表符号 */
    --list-ul-marker-color:var(--rainbow-1);

    .has-list-bullet .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line>span.cm-formatting:first-of-type .list-bullet::after {
        color: var(--rainbow-1);
    }

    .has-list-bullet .has-list-bullet .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-2.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-2.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
        color: var(--rainbow-2);
    }

    .has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-3.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-3.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
        color: var(--rainbow-3);
    }

    .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-4.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-4.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
        color: var(--rainbow-4);
    }

    .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-5.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-5.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
        color: var(--rainbow-5);
    }

    .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-6.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
    .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-6.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
        color: var(--rainbow-6);
    } 

    /* 彩色层级线 */
    :is(ul, ol) > li,
    .cm-hmd-list-indent .cm-indent:nth-child(1)::before {
    --indentation-guide-color: var(--rainbow-1);
    }

    :is(ul ul, ol ol) > li,
    .cm-hmd-list-indent .cm-indent:nth-child(2)::before {
    --indentation-guide-color: var(--rainbow-2);
    }

    :is(ul ul ul, ol ol ol) > li,
    .cm-hmd-list-indent .cm-indent:nth-child(3)::before {
    --indentation-guide-color: var(--rainbow-3);
    }

    :is(ul ul ul ul, ol ol ol ol) > li,
    .cm-hmd-list-indent .cm-indent:nth-child(4)::before {
    --indentation-guide-color: var(--rainbow-4);
    }

    :is(ul ul ul ul ul, ol ol ol ol ol) > li,
    .cm-hmd-list-indent .cm-indent:nth-child(5)::before {
    --indentation-guide-color: var(--rainbow-5);
    }

    :is(ul ul ul ul ul ul, ol ol ol ol ol ol) > li,
    .cm-hmd-list-indent .cm-indent:nth-child(6)::before {
    --indentation-guide-color: var(--rainbow-6);
    }
}
6 个赞
12

万分感谢，帮了大忙了。很喜欢这种淡彩的样式设计。

13

为什么我一直无法更改有序列表、无序列表，各层级标识的颜色？

14

用了主题？其他CSS片段已经进行过设定？被插件控制了？
建议你先试一试沙箱时能不能生效
看了下我现在生效的CSS片段，和楼上大佬的一样，就是自己改了下颜色

15

不对呀，我又关闭所有插件和主题，试了下。
有序列表是可行的。
但是无序列表，没有用呀

16 
    color: var(--rainbow-5);
}

:is(ul, ol) :is(ul, ol) :is(ul, ol) :is(ul, ol) :is(ul, ol) ol li::marker,
:is(ul, ol)  :is(ul, ol) :is(ul, ol) :is(ul, ol)  :is(ul, ol) ol li::before,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-6.cm-line div.cm-fold-indicator ~ span.cm-formatting.cm-formatting-list-ol,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-6.cm-line span.cm-hmd-list-indent ~ span.cm-formatting.cm-formatting-list-ol {
    color: var(--rainbow-6);
}

/* 彩色无序列表符号 */
--list-ul-marker-color:var(--rainbow-1);

.has-list-bullet .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line>span.cm-formatting:first-of-type .list-bullet::after {
    color: var(--rainbow-1) !important;
}

.has-list-bullet .has-list-bullet .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-2.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-2.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
    color: var(--rainbow-2) !important;
}

.has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-3.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-3.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
    color: var(--rainbow-3) !important;
}

.has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-4.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-4.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
    color: var(--rainbow-4) !important;
}

.has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-5.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-5.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
    color: var(--rainbow-5) !important;
}

.has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-6.cm-line div.cm-fold-indicator ~ span.cm-formatting .list-bullet::after,
.markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-6.cm-line span.cm-hmd-list-indent ~ span.cm-formatting .list-bullet::after {
    color: var(--rainbow-6) !important;
} 

/* 彩色层级线 */
:is(ul, ol) > li,
.cm-hmd-list-indent .cm-indent:nth-child(1)::before {
--indentation-guide-color: var(--rainbow-1);
}

:is(ul ul, ol ol) > li,
.cm-hmd-list-indent .cm-indent:nth-child(2)::before {
--indentation-guide-color: var(--rainbow-2);
}

:is(ul ul ul, ol ol ol) > li,
.cm-hmd-list-indent .cm-indent:nth-child(3)::before {
--indentation-guide-color: var(--rainbow-3);
}

:is(ul ul ul ul, ol ol ol ol) > li,
.cm-hmd-list-indent .cm-indent:nth-child(4)::before {
--indentation-guide-color: var(--rainbow-4);
}

:is(ul ul ul ul ul, ol ol ol ol ol) > li,
.cm-hmd-list-indent .cm-indent:nth-child(5)::before {
--indentation-guide-color: var(--rainbow-5);
}

:is(ul ul ul ul ul ul, ol ol ol ol ol ol) > li,
.cm-hmd-list-indent .cm-indent:nth-child(6)::before {
--indentation-guide-color: var(--rainbow-6);
}

}

兄弟呀，帮看下，是这段么？

17

是不是必须得安装Blue Topaz主题，才会生效？
否则，没用？

18

任意主题都能生效的

你确定CSS代码启用了吗？选项 - 外观 - CSS代码片段 里面确认一下

19

10楼大佬的代码，我都生效的：
image
image

20

兄弟呀，你这无序列表，颜色不是没效果么？那个圆点颜色还是灰色的，没变化呀！
你看看我改的颜色的效果。灰色的圆点是有颜色的！
image