特别鸣谢 wilsons 大佬。
PS:在移动端,如果多级列表进行缩进,会导致前面的序号和后面的内容存在无法对齐的现象,介意误用,等大佬改吧……
代码:
.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; /* 加粗 */
}
.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: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
.list[data-subtype="o"] {
counter-reset: o1 0 o2 0 o3 0;
}
.li[data-subtype="o"]>.protyle-action::after {
padding: 3px 2px;
width: 24px;
display: flex;
justify-content: center;
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
.li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
counter-increment: o2;
content: counter(o2, lower-latin)".";
position: absolute;
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
counter-increment: o3;
content: counter(o3, lower-roman)".";
position: absolute;
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
.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;
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
/* 继续添加类似的修改到其他选择器 */