[css] 自定义多级有序列表和无序列表

思源笔记自带的有序列表和无序列表，也支持多级，但是各级的前导字符都是一样的，层次感不好，用起来别扭，我通过代码片段样式实现了一个自定义的，用了一段时间，效果非常好，现分享出来：

无序列表

/* 初始化计数器 */
.list[data-subtype="o"] {
    counter-reset: o1 0 o2 0 o3 0;
}

.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; /* 加粗 */
}

.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; /* 修改颜色为红橙色调 */
}
​

有序列表

/* 隐藏原始编号 */
.li[data-subtype="o"] .li[data-subtype="o"] .protyle-action--order {
    color: transparent !important;
}

/* 动态生成编号的颜色 */
.li[data-subtype="o"] .li[data-subtype="o"] .protyle-action::after {
    color: var(--b3-theme-on-background);
}

/* 初始化计数器 */
.list[data-subtype="o"] {
    counter-reset: o1 0 o2 0 o3 0 o4 0;
}

/* 第一层嵌套：阿拉伯数字 (1. 2. 3.) */
.li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o1;
    content: counter(o1, decimal) ".";
    position: absolute;
    padding: 3px 2px;
    width: 24px;
    display: flex;
    justify-content: center;
    margin: -20px 0 0 -8px !important;
}

/* 第二层嵌套：中文括号 + 阿拉伯数字 (（1） （2） （3）) */
.li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: "（" counter(o2, decimal) "）";
    position: absolute;
}

/* 第三层嵌套：大写拉丁字母 (A. B. C.) */
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, upper-alpha) ".";
    position: absolute;
}

/* 第四层嵌套：小写罗马数字 (i. ii. iii.) */
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o4;
    content: counter(o4, lower-roman) ".";
    position: absolute;
}

/* 循环更深层次嵌套，按四层规则重新开始 */

/* 第一层规则：阿拉伯数字 (循环) */
.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) ".";
    position: absolute;
}

/* 第二层规则：中文括号 + 阿拉伯数字 (循环) */
.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, decimal) "）";
    position: absolute;
}

/* 第三层规则：大写拉丁字母 (循环) */
.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, upper-alpha) ".";
    position: absolute;
}

/* 第四层规则：小写罗马数字 (循环) */
.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: o4;
    content: counter(o4, lower-roman) ".";
    position: absolute;
}
​

用法

用法其实非常简单：

设置 → 外观 → 代码片段。

将这两份 CSS 样式放进去，就立即生效了。

效果图