[css] 一个修改序号颜色 + 层级显示的 css，但是还是有小毛病

代码在下面。

重点是，这个代码无法实现从任意序号开始编号！

例如，输入一个 3. ，他会自动变成 1. 。

看看有无大佬帮忙看看 🙏

/* 1. 定义各层级编号样式 (保持不变) */
div[data-subtype="o"].list {
    --o1-style: counter(o1, decimal)".";
    --o2-style: counter(o2, decimal)")";
    --o3-style: counter(o3, upper-latin)".";
    --o4-style: counter(o4, lower-latin)".";
    --o5-style: counter(o5, lower-roman)".";
}

/* 2. 初始化所有计数器 (保持不变) */
.protyle-wysiwyg .list[data-subtype="o"] {
    counter-reset: o1 0 o2 0 o3 0 o4 0 o5 0;
}

/* 3. 通用 .protyle-action::after 样式 (布局、颜色、字体) - 这是核心 */
.protyle-wysiwyg .list[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    /* 原始布局样式 */
    margin: -12px 0 0 -12px !important;
    line-height: 20px;
    padding: 3px 2px;
    width: 24px;
    display: flex;
    justify-content: center;
    position: absolute;

    /* 默认状态：统一颜色和字体 */
    color: #007BFF !important; /* 蓝色 */
    font-weight: bold !important;
    transition: color 0.2s ease-in-out; /* 添加一个平滑的颜色过渡效果 (可选) */
}

/* --- 新增：鼠标悬停在 .protyle-action 上时，其 ::after 伪元素的样式 --- */
.protyle-wysiwyg .list[data-subtype="o"] .li[data-subtype="o"] > .protyle-action:hover::after {
    color: #FFFFFF !important; /* 鼠标悬停时变为白色 */
    /* font-weight: bold !important; /* 粗体通常在悬停时保持 */
}


/* 4. 隐藏 .protyle-action 的原始文本 (保持不变) */
.protyle-wysiwyg .list[data-subtype="o"] .li[data-subtype="o"] > .protyle-action {
    color: transparent !important;
}


/* 5. 针对特定深层级 ::after 的 mix-blend-mode (保持不变) */
.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .protyle-action::after {
    mix-blend-mode: unset !important;
}


/* --- 按 o1 -> o2 -> o3 -> o4 -> o5 -> o1(循环) 的顺序定义层级样式 (这部分保持不变) --- */

/* 第1层级: 使用 o1 (1.) */
.protyle-wysiwyg .list[data-subtype="o"] > .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o1;
    content: var(--o1-style);
}

/* 第2层级: 使用 o2 (1)) */
.protyle-wysiwyg .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: var(--o2-style);
}

/* 第3层级: 使用 o3 (A.) */
.protyle-wysiwyg .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: var(--o3-style);
}

/* 第4层级: 使用 o4 (a.) */
.protyle-wysiwyg .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o4;
    content: var(--o4-style);
}

/* 第5层级: 使用 o5 (i.) */
.protyle-wysiwyg .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o5;
    content: var(--o5-style);
}

/* 第6层级: 循环回 o1 (1.) */
.protyle-wysiwyg .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o1;
    content: var(--o1-style);
}

/* 第7层级: 循环回 o2 (1)) */
.protyle-wysiwyg .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: var(--o2-style);
}

/* 第8层级: 循环回 o3 (A.) */
.protyle-wysiwyg .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .list[data-subtype="o"] > .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: var(--o3-style);
}