[css] 有序列表样式分享（1.→（1）→A.→i.）

基于 Savor 主题有序列表样式，GPT 修改，自己测试了一下能用：

版本一：适用 Savor、Odyssey 主题（完美适配）

/* 隐藏原始编号 */
.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;
}

/* 第二层嵌套：中文括号 + 阿拉伯数字 (（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;
}
​

版本二：其他主题（已知问题：方框阴影错位）

/* 隐藏原始编号 */
.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;
}



​

附 GPT 调教提示语，有需要的朋友可以根据自己需求修改：

第一句：

帮我分析 CSS 代码

第二句：

该 CSS 代码片段适用于“思源笔记”：（附上参考代码）

第三句：

请基于源代码修改：（注意！基于源代码修改，无需优化！）

第一层嵌套： 使用阿拉伯数字 (e.g., 1. 2. 3.)。

第二层嵌套： 使用中文括号 + 阿拉伯数字 (e.g., （1） （2） （3）)。

第三层嵌套： 使用大写拉丁字母 (e.g., A. B. C.)。 第四层嵌套：使用小写罗马数字 (e.g., i. ii. iii.)。

层级越深，编号的规则在这四种格式之间循环。