文件列表的树,如何父节点加粗,其他23456节点默认粗细

我看社区有一个是按照文件和文件夹做区分。但不是很契合我需要的。顺便在问一个,树结构下面的层级线,如何鼠标悬停在区域内才显示,在文件列表区域外就不显示
image 3

如果是指给顶层文件夹加特殊样式

那第一个问题大致是找 .nav-files-container 的精确的第N层的子代 div,
可以依次定位到顶层文件夹, 二层文件夹…

.nav-files-container > div > div.nav-folder > div.nav-folder-title {
	/* color: red !important; */
	font-weight: bold;
}
.nav-files-container > div > div.nav-folder > div.nav-folder-title:hover {
	color: red;
	font-weight: bold;
}

第二个问题大致是

.nav-files-container .tree-item-children {
    border-inline-start: var(--nav-indentation-guide-width) solid transparent;
}
.nav-files-container .tree-item-children:hover {
    border-inline-start: var(--nav-indentation-guide-width) solid red;
}

/**
CSS中的border-inline-start属性是逻辑属性,它与物理属性相关联,但不受书写模式和方向的影响。
这个属性用于设置元素内联方向起始侧的边框。

逻辑属性允许开发者编写与特定书写模式无关的样式规则。
处理不同语言和方向的文本时非常有用,它们可能有不同的书写和阅读方向。
以下是border-inline-start属性可能对应的物理属性:
	在水平书写模式(如拉丁文、阿拉伯文)中,如果文本方向是ltr(从左到右),border-inline-start对应于border-left。
	如果文本方向是rtl(从右到左),则对应于border-right。
	在垂直书写模式中,如果文本行从上到下排列,border-inline-start可能对应于border-top。
	如果文本行从下到上排列,它可能对应于border-bottom。
使用border-inline-start可以使你的CSS代码更加通用和可维护
*/

在默认主题测试过, 别的主题可能有坑

好嘞 感谢哈 :grinning: