如何将CSS中[无序列表]修改成[标题+无序列表]，以实现卡片视图？

[domo]

Obsidian 样式 - minimal 主题 Cards 卡片布局](https://pkmer.cn/Pkmer-Docs/10-obsidian/obsidian外观/css-片段/obsidian样式-minimal主题cards卡片布局/)

该CSS 有个功能是将无序列表转换为卡片

遇到的问题

左边是【无序列表】源码，右边是应用CSS后的效果

预期的效果

希望将原来的【无序列表】修改成【标题+无序列表】的形式，实现卡片效果

已尝试的解决方案

咨询多个AI修改代码，仍然无法实现

[Inorganic_wfftty (吴天宇)]

建议使用插件anyblock

[domo]

感谢推荐，看了该插件说明，也是用list列表转卡片的

[Azona77]

楼主意思是用标题替代这个脚本中一级列表的位置？

纯css应该是没法做到。如图这个脚本中是将整个li元素转换为卡片的，而标题和列表是两个独立的层级，不适合通过css转换为一整块。

原效果：

脚本效果：

对应的代码是：

.list-cards.markdown-preview-view div>ul>li {
	background-color: var(--cards-background);
	padding: calc(var(--cards-padding)/2);
	border-radius: var(--radius-s);
	border: var(--cards-border-width) solid var(--background-modifier-border);
	overflow: hidden;
	margin-inline-start: 0    
}

[domo]

您对我的需求，理解正确。您的解释和图例，我也明白了。意思就是标题和列表是两个不同的元素，很难用CSS把它们合在一起。那我继续用回原来的列表吧。感谢您的回复。