[css] 可折叠的标题自动编号

CSS 程序

/* ================= 标题自动编号模块 ================= */
body { counter-reset: h1-count 0; }
h1,.h1 { counter-reset: h2-count 0; }
h2,.h2 { counter-reset: h3-count 0; }
h3,.h3 { counter-reset: h4-count 0; }
h4,.h4 { counter-reset: h5-count 0; }
h5,.h5 { counter-reset: h6-count 0; }

/* 通用计数器样式 */
.protyle-wysiwyg [data-node-id][class^="h"] div:first-child:before,
.b3-typography h1:before, .b3-typography h2:before, .b3-typography h3:before,
.b3-typography h4:before, .b3-typography h5:before, .b3-typography h6:before {
    display: inline-block !important;
    float: none;
    margin-right: 8px;
    font-size: 100%;
    opacity: 1 !important; /* 强制显示防止折叠隐藏 */
}

/* 层级式编号生成规则 */
.protyle-wysiwyg [data-node-id].h1 div:first-child:before,
.b3-typography h1:before { 
    counter-increment: h1-count; 
    content: counter(h1-count) "\00A0"; 
}
.protyle-wysiwyg [data-node-id].h2 div:first-child:before,
.b3-typography h2:before { 
    counter-increment: h2-count; 
    content: counter(h1-count) "." counter(h2-count) "\00A0"; 
}
.protyle-wysiwyg [data-node-id].h3 div:first-child:before,
.b3-typography h3:before { 
    counter-increment: h3-count; 
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "\00A0"; 
}
.protyle-wysiwyg [data-node-id].h4 div:first-child:before,
.b3-typography h4:before { 
    counter-increment: h4-count; 
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "\00A0"; 
}
.protyle-wysiwyg [data-node-id].h5 div:first-child:before,
.b3-typography h5:before {
    counter-increment: h5-count;
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "." counter(h5-count) "\00A0";
    font-size: 90% !important;
}
.protyle-wysiwyg [data-node-id].h6 div:first-child:before,
.b3-typography h6:before {
    counter-increment: h6-count;
    content: counter(h1-count) "." counter(h2-count) "." counter(h3-count) "." counter(h4-count) "." counter(h5-count) "." counter(h6-count) "\00A0";
    font-size: 85% !important;
}

/* ================= 标题视觉标识模块 ================= */
/* 标题颜色分级系统 */
[data-type="NodeHeading"].h1 { color: #d40045 !important; }
[data-type="NodeHeading"].h2 { color: #ff7f00 !important; }
[data-type="NodeHeading"].h3 { color: #66b82b !important; }
[data-type="NodeHeading"].h4 { color: #093f86 !important; }
[data-type="NodeHeading"].h5 { color: #340c81 !important; }


/* ================= 折叠状态适配模块 ================= */
.protyle-wysiwyg [data-fold="1"] [data-node-id][class^="h"] {
    position: relative;
    padding-right: 4em !important; /* 为折叠标记留出空间 */
}

程序亮点

对比折叠前后，标题均能实现自动编号

折叠前

折叠后