【CSS 片段】多彩大纲层级

• 灵感来源于“思源群友”在 QQ 群中的提问
  • 经过讨论与完善，将 CSS 片段分享到论坛中，开阔大家思路

效果图

以“绿叶”主题为例，代码效果展示

/* 多彩层级大纲 */
/* 相关代码来自于dark+主题作者zuoqiu-yingyi和starDust主题作者，特别感谢notion主题作者Roy，灵感来源于"思源群友" */
div.sy__outline ul {
    background-color: var(--b3-font-background1);
}

div.sy__outline ul>ul {
    background-color: var(--b3-font-background2);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul {
    background-color: var(--b3-font-background3);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul {
    background-color: var(--b3-font-background4);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background5);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background6);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background7);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background8);
    margin-left: 10px;
}
​