登录注册

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

本贴最后更新于 216 天前，其中的信息可能已经时移俗易

基于 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.)。

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

思源笔记

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

融合块、大纲和双向链接，重构你的思维。
26030 引用 • 108029 回帖
代码片段

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

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

2 引用

请问这个序列号怎么让它自动变更? • wilsons

思源笔记列表使用指南 • Imuvux

3 操作

JOYCELEEEEE 在 2024-11-18 23:35:01 更新了该帖

JOYCELEEEEE 在 2024-11-18 23:25:19 更新了该帖

JOYCELEEEEE 在 2024-11-18 22:29:44 更新了该帖

JOYCELEEEEE 6 个月前

1 感谢

4 收藏

2 引用

3 操作

9 回帖

752 298 4 163 2 285

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

JOYCELEEEEE • 6 个月前
订阅者作者

已更新代码，试试看。

1 回复

1 操作
JOYCELEEEEE 在 2024-11-18 22:31:20 更新了该回帖
其他回帖

EmptyLight • 6 个月前 • 1

付费者

我印象里见过同样的问题，找了一下写过的代码，应该是 margin 这一行修正的。可以加上 margin 这行试试。


.li[data-subtype="o"] > .protyle-action::after {
    padding: 3px 2px;
    width: 24px;
    display: flex;
    justify-content: center;
    margin: -20px 0 0 -8px !important;
}

1 回复

sleidga • 2 周前

付费者


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


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

/* 循环嵌套：*/
.li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    content: counters(o1, ".") ". ";
    position: absolute;
}

/* 第二层文字退格：*/
.li[data-subtype="o"] .li[data-subtype="o"]> .protyle-action ~ div {
    padding-left: 10px;
}

/* 第三层文字退格：*/
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]> .protyle-action ~ div {
    padding-left: 15px;
}

/* 第四层文字退格：*/
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]> .protyle-action ~ div {
    padding-left: 20px;
}

/* 第五层文字退格：*/
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]> .protyle-action ~ div {
    padding-left: 33px;
}

wenbocn • 6 个月前
付费者

发现错行了，可能因为不是默认字体的原因，请问能调整吗？

1 回复
查看全部回帖

JOYCELEEEEE

输入是为输出。

回帖

148

帖子

积分

3884

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

相关帖子

[js][css] 仿 Obsidian Callout 样式

[js] 告别 select * from blocks！嵌入块多字段查询来了

[css] “转换为”二级菜单上移至一级菜单

[js] 展开二级菜单 20250619

思源性能优化指南：如何使用火焰图排查卡顿问题

[css] 彩色标题 - 渐变下划线

[css] 鼠标移开时自动隐藏纵向引导线

欢迎来到这里！

近期热议

推荐标签标签

最新标签

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

相关帖子

[js][css] 仿 Obsidian Callout 样式

[js] 告别 select * from blocks！嵌入块多字段查询来了

[css] “转换为”二级菜单上移至一级菜单

[js] 展开二级菜单 20250619

思源性能优化指南：如何使用火焰图排查卡顿问题

[css] 彩色标题 - 渐变下划线

[css] 鼠标移开时自动隐藏纵向引导线

欢迎来到这里！

近期热议

推荐标签 标签

最新标签

推荐标签标签