思源笔记 CSS 片段-列表自动加粗
00 分钟
2023-8-18
2024-8-19
date
type
status
slug
summary
tags
category
password
icon
URL

背景

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

CSS 片段

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

版本 1:只要一个列表项(li)有子项,则所属的列表块(list)的最顶级列表项(li)都加粗

notion image
 

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

notion image
 
未来有时间可能会开发一个插件(或者感兴趣的大佬可以帮忙开发),更便捷让列表自动加粗和取消加粗,计划插件应该有的功能:
  • 选择是否启用顶级列表自动加粗功能
  • 通过右键块菜单【插件-列表自动加粗】,点击即可自动加粗或者取消加粗

学习

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

 
上一篇
思源笔记主题推荐-任我行(Odyssey)
下一篇
Image Toolbox - 拥有 93 个功能的开源图片编辑器

评论
Loading...