编辑器-列表(代码片段)

type
status
date
slug
summary
tags
category
icon
password

背景

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

CSS 片段

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

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

notion image
 

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

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

学习

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

 
上一篇
编辑器-任务列表(代码片段)
下一篇
编辑器-背景(代码片段)
Loading...

思源笔记用户指南

文章列表
思源笔记用户指南
🍼新手引导
✏️基础操作
⛓️基础块
🧬高级块
📊数据库
🔡代码片段
🔍搜索进阶
🚀高级操作
💎会员特权
💠功能特性
🖼️主题推荐
🔌常用插件
💬交流区