思源笔记 CSS 片段丨列表自动加粗

背景

列表项（li) 有内容的话，我一般会加粗这个列表项，来凸显一级内容。之前一直都是手动加粗，每次都觉得太麻烦了，所以在 GPT 的帮助下，写了一个 CSS 代码，可以自动进行加粗，效果挺不错的。

CSS 片段

功能

• 自动加粗有子项的列表项（li）
• 【文档/列表块】自定义属性添加 list-autobold=false 可取消列表自动加粗
• 【非顶级列表块/列表项没有子项的列表块】自定义属性添加 list-autobold=true 可自动加粗

版本 1：只要一个列表项（li）有子项，则所属的列表块（list）的最顶级列表项（li）都加粗

/* ************列表自动加粗*********** */
/* ** 版本1：只要一个列表项（li）有子项，则所属的列表块（list）的最顶级列表项（li）都加粗** */
/* ** 顶级列表自动加粗：文档/列表块自定义属性添加`list-autobold=false`取消自动加粗）** */
.protyle-wysiwyg:not([custom-list-autobold="false"])>.list:not([custom-list-autobold="false"]):has(>.li> div.protyle-action+ .p +div:not(.protyle-attr)) {

    /* 选择列表项的第一个段落进行加粗 */
    &>.li>div.protyle-action+.p {
        font-weight: bold;
    }
}
.b3-typography ul:not([custom-list-autobold="false"]):has(li>p+*){
    &>li>p {
        font-weight: bold;
    }
}

/* ** 【非顶级列表块/列表项没有子项的列表块】自定义属性添加`list-autobold=true`可自动加粗**  */
.protyle-wysiwyg .list[custom-list-autobold="true"] {

    /* 选择列表项的第一个段落进行加粗 */
    &>.li>div.protyle-action+.p {
        font-weight: bold;
    }
}
.b3-typography ul[custom-list-autobold="true"] {
    &>li>p {
        font-weight: bold;
    }
}

版本 2：只加粗有子项的 li，但同一个列表，一个 li 没有子项就不会加粗。

/* ************列表自动加粗*********** */
/* ** 版本2：只加粗有子项的li，但同一个列表，一个li没有子项就不会加粗** */
/* ** 顶级列表自动加粗：文档/列表块自定义属性添加`list-autobold=false`取消自动加粗）** */
.protyle-wysiwyg:not([custom-list-autobold="false"])>.list:not([custom-list-autobold="false"]) >.li:has(> div.protyle-action+ .p +div:not(.protyle-attr)) {

    /* 选择列表项的第一个段落进行加粗 */
    &>div.protyle-action+.p {
        font-weight: bold;
    }
}

.b3-typography ul:not([custom-list-autobold="false"]) > li:has(>p+*){
    &>p {
        font-weight: bold;
    }
}

/* ** 【非顶级列表块/列表项没有子项的列表块】自定义属性添加`list-autobold=true`可自动加粗**  */
.protyle-wysiwyg .list[custom-list-autobold="true"] {

    /* 选择列表项的第一个段落进行加粗 */
    &>.li>div.protyle-action+.p {
        font-weight: bold;
    }
}
.b3-typography ul[custom-list-autobold="true"] {
    &>li>p {
        font-weight: bold;
    }
}

未来有时间可能会开发一个插件（或者感兴趣的大佬可以帮忙开发），更便捷让列表自动加粗和取消加粗，计划插件应该有的功能：

• 选择是否启用顶级列表自动加粗功能
• 通过右键块菜单【插件-列表自动加粗】，点击即可自动加粗或者取消加粗

学习

CSS 中的 nest 嵌套语法：用于嵌套规则，可以在嵌套的规则中更方便地创建复杂的选择器，而无需重复写父选择器。

.button {
  color: blue;
  &:hover {
    color: red;
  }
}

/* &代表父选择器，也可以忽略 */

现代 CSS 解决方案：原生嵌套（Nesting） - ChokCoco - 博客园 (cnblogs.com)

过去只有在 LESS、SASS 等预处理器中，我们才能使用嵌套的写法

从 Chrome 112 开始，原生 CSS 也可以使用嵌套语法了。