div[data-path$='sortspec'],
div[data-path$='sortspec']+ div.nav-folder-children
{
display: none;
}
只能隐藏目录，要隐藏文件sortspec，该如何写？
隐藏文件：
.nav-file:has(> .nav-file-title[data-path$='sortspec.md']) {
display: none;
}
隐藏文件夹：
.nav-folder:has(> .nav-folder-title[data-path$='sortspec']) {
display: none;
}
有效！
能解读下1-2楼 都能隐藏文件夹的区别，这两种CSS是如何捕获出来的？
现在只会用ctrl-shift i ，但似乎这个工具，并不能获得这些CSS样式。
中括号是属性选择器，具体可以翻翻w3school的文档
逗号是或 ，加号是 且吗？
.nav-folder:has(> ) 那这个结构也是可以用属性选择器改写吗？
是如何定位到.nav-folder .nav-folder-title data-path 这些名称？
建议问GPT或者翻文档
我没系统学过css，简单理解就是加号表示“之后”；>号表示子元素；空格表示同时具有前后类名；:has伪类表示“具有…的元素”（不一定规范）
1 个赞
我稍微说明一下,
> 是直系子元素 (必须是 父子关系)
空格 是后代元素 (父子关系, 爷孙关系, 均可以)
但我没研究过, 在 :has(> .nav-folder-title 这结构内的 > 空格 是否还是这意思,
我说错了请大家指出来
1 个赞
1楼和2楼的区别是：
1楼隐藏的是文件夹里的标题和子元素，而它们上面还有个父元素.nav-folder，应该直接隐藏父元素.nav-folder才合理，不过1楼的方法视觉上也没问题。
而2楼是直接隐藏.nav-folder，自然它的子元素.nav-folder-title和.nav-folder-children也会被隐藏了。
devtools工具并不能生成这么复杂的css样式，这种方式的选择符要自己写，或者让AI帮你写。
.nav-folder:has(> .nav-folder-title[data-path$='sortspec']) 的含义是：查找元素.nav-folder，条件是.nav-folder的直接子元素必须有类名.nav-folder-title，且属性data-path的值必须以sortspec结尾，所以这个选择符实际选择的元素是父元素.nav-folder。如果去掉>，则表示匹配后代元素。
隐藏文件的原理相似，详细解释建议问问AI。
结构内的 > 空格还是表示直接子元素的意思
比如：
div > p Selects all <p> elements where the parent is a <div> element
因为直接子元素的语法本来就可以加空格，当然去掉空格也没问题，只是加空格更规范。
1 个赞
补充，如果想同时隐藏多个文件或文件夹也可以这样：
/* 隐藏多个文件 */
.nav-file:has(>.nav-file-title:is(
[data-path$='demo1.md'],
[data-path$='demo2.md']
)) {
display: none;
}
/* 隐藏多个文件夹 */
.nav-folder:has(>.nav-folder-title:is(
[data-path$='demo1'],
[data-path$='demo2']
)) {
display: none;
}
当然按照2楼方法写多条也是可以的。
1 个赞
THx wilson
还有一个疑问，CSS里，如何确定哪些改变能生效？
比如，有时我加入改变字体和颜色，但并不生效。
判断css选择符是否生效：
-
devtools“样式”tab里通常鼠标移到选择符上，如果能匹配，页面对应的元素会高亮
-
devtools控制台用
document.querySelectorAll("你要验证的css选择符代码")来查看是否匹配到，以及匹配到的值是否自己想要的
当然，有些样式即使匹配到了，但不生效的原因可能是被其他优先级更高的选择符覆盖了。这种情况可以在devtools里“计算样式”tab里去定位到底是哪个选择符生效的。如图：
我发你的私信有无看到？就是那个保存位置的js，导致在编辑时不断提示外部修改给合并的提示。