Css-另一个树视图打开/关闭和父问题

我为此奋斗了两天，这可能很简单，但我没有达到目的。 我想有一个好的，干净的多层次的树视图，我正试图首先目标儿童后根。我可以这样做，但我相信使用~和+符号可能更简单。其次，我需要复选框来打开/关闭树。 我知道我总是可以使用预先制作的，但我需要学习。 有什么帮助吗？ 没有javascript或查询，请使用纯css

ul.tree li a{
/*1ºNível*/
颜色：红色；
}
树，树，树，树，树{
/*2ºNível*/
颜色：蓝色；
}
ul.tree ul>ul li a{
/*3ºNível*/
颜色：黄色；
}
ul.tree ul>ul>ul li a{
/*4ºNível*/
颜色：绿色；
}
树ul>ul>ul>ulli a{
/*5ºNível*/
颜色：橙色；
}
ul.tree>input.[type=checkbox]：选中ul.tree ul>li{
显示：无；
}

_根




意大利面





意大利面A-1



意大利面dentro da意大利面A-1





意大利面A-1

这是代码，稍后我将链接到文档并解释我所做的工作。我已经验证了HTML。你们看到的CSS中奇怪的语法是方法论。您应该避免将裸元素作为目标，并始终尝试为它们指定特定的类

-如果你觉得更容易

请注意：尽管我已经尝试使用HTML和CSS的最佳实践，但这并不是您在生产中要做的事情。它太“黑”了，而且纯css解决方案的“价格”比我们决定使用一点JS要高得多。但是，尽管如此，尝试克服这些障碍还是很有趣的，也就是说，在你设定的范围内提出解决方案

标签{
字体大小：粗体；
}
/*列表风格的黑客，使我们能够避免子弹前复选框-不幸的是，我们必须提供和假子弹与伪前元素为每一个李，我们想要他们*/
保险商实验室{
列表样式：无；
}
菲切罗：以前{
内容：“•”；
位置：绝对位置；
左：-15px；
}
意大利面，意大利面，意大利面，意大利面{
内容：“”；
位置：绝对位置；
左：-15px；
顶部：3px；
}
.意大利面-2.菲切罗：：之前{
内容：“*”；
位置：绝对位置；
左：-15px；
顶部：3px；
}
/*复选框用于选择性地隐藏和显示树的各个部分*/
.树{
显示：无；
}
#0级：选中的~.树{
显示：块；
}
.意大利面-1，
.意大利面-2，
.意大利面-3，
1.面食-4{
显示：无；
}
#1级：已选中。1级{
显示：块；
}
#二级：选中~.2{
显示：块；
}
#第三级：已选中。第三级{
显示：块；
}
#第4级：选中。第4级{
显示：块；
}
/*链接*/
菲切罗先生{
位置：相对位置；
}
.ficheiro\u链接--根{
颜色：红色；
}
.ficheiro__链路——一级{
颜色：蓝色；
}
.ficheiro__链路——二级{
颜色：黄色；
}
.ficheiro__链路——三级{
颜色：绿色；
}
.ficheiro__链路——4级{
颜色：橙色；
}

_根




意大利面





意大利面A-1



意大利面dentro da意大利面A-1





意大利面A-1

您的html完全无效-ul只能将li作为直接子项，因此您需要使用divs或Javascript谢谢Pete，我不知道，我正在更新html，w3c现在有效。现在css不起作用了是的，不幸的是，现在您将无法在复选框上使用同级选择器，因为它们不再是同级选择器，因此您将需要在该结构中使用js。不过，您没有相应地调整CSS

ul.tree>input。[type=checkbox]：选中的

不应与元素匹配（因为

input

不能是

ul

的直接子元素）。谢谢，我从来没有听说过BEM方法（+加1），