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

疑问解答
1

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

2

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

那第一个问题大致是找 .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代码更加通用和可维护
*/

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

1 个赞
3

好嘞 感谢哈 :grinning:

4

顺着网线找来，已用，大佬写的代码太帅了！