Css - 另一个 TreeView 打开/关闭和父问题

Question

我为此奋斗了 2 天，它可能很简单，但我没有到达那里。 我想要一个漂亮、干净的多层次 TreeView ，我试图在 root 之后首先定位 child 。我可以做到，但我确信使用 ~ 和 + 符号这可能更简单。其次，我需要复选框来打开/关闭树。 我知道我总是可以使用预制的，但我需要学习。 有什么帮助吗？ 没有 javascript 或查询，请使用纯 css。

ul.tree li a {
  /* 1º Nível */
  color: red;
}

ul.tree ul>li a {
  /* 2º Nível */
  color: blue;
}

ul.tree ul>ul li a {
  /* 3º Nível */
  color: yellow;
}

ul.tree ul>ul>ul li a {
  /* 4º Nível */
  color: green;
}

ul.tree ul>ul>ul>ul li a {
  /* 5º Nível */
  color: orange;
}

ul.tree>input.[type=checkbox]:checked ul.tree ul>li {
  display: none;
}

<ul class="tree">
  <li><input type=checkbox /><b>_root</b></li>
  <li class="ficheiro"><a href="#">ficheiro</a></li>
  <li class="ficheiro"><a href="#">ficheiro</a></li>
  <li>
    <ul class="pasta">
      <li><input type=checkbox /><b>Pasta A</b></li>
      <li class="ficheiro"><a href="#">ficheiro</a></li>
      <li class="ficheiro"><a href="#">ficheiro</a></li>
      <li class="ficheiro"><a href="#">ficheiro</a></li>
      <li>
        <ul class="pasta">
          <li><input type=checkbox /><b>Pasta A - 1</b></li>
          <li class="ficheiro"><a href="#">ficheiro</a></li>
          <li>
            <ul class="pasta">
              <li><input type=checkbox /><b>Pasta dentro da pasta A - 1</b></li>
              <li class="ficheiro"><a href="#">ficheiro</a></li>
              <li class="ficheiro"><a href="#">ficheiro</a></li>
              <li class="ficheiro"><a href="#">ficheiro</a></li>
              <li>
                <ul class="pasta">
                  <li><input type=checkbox /><b>Pasta dentro da pasta dentro da pasta A -1</b></li>
                  <li class="ficheiro"><a href="#">ficheiro</a></li>
                  <li class="ficheiro"><a href="#">ficheiro</a></li>
                  <li class="ficheiro"><a href="#">ficheiro</a></li>
                  <li class="ficheiro"><a href="#">ficheiro</a></li>
                  <li class="ficheiro"><a href="#">ficheiro</a></li>
                </ul>
              </li>
              <li class="ficheiro"><a href="#">ficheiro</a></li>
              <li class="ficheiro"><a href="#">ficheiro</a></li>
            </ul>
          </li>
          <li class="ficheiro"><a href="#">ficheiro</a></li>
        </ul>
      </li>
      <li class="ficheiro"><a href="#">ficheiro</a></li>
    </ul>
  </li>
  <li class="ficheiro"><a href="#">ficheiro</a></li>
  <li class="ficheiro"><a href="#">ficheiro</a></li>
</ul>

fiddle

example of what I made

Answer 1

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

JSFiddle - 如果您觉得它更容易。

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

label {
  font-weight: bold;
}

/* LIST style hacks which allows us to avoid bullets before checkbox - unfortunately, we have to supply and fake the bullets with pseudo before element for every li where we want them */
ul {
  list-style: none;
}

.ficheiro::before {
  content: "•";
  position: absolute;
  left: -15px;
}

.pasta-1 .ficheiro::before {
  content: "°";
  position: absolute;
  left: -15px;
  top: 3px;
}

.pasta-2 .ficheiro::before {
  content: "*";
  position: absolute;
  left: -15px;
  top: 3px;
}

/* CHECKBOX hacks for selectively hiding and showing the parts of the tree */
.tree {
  display: none;
}

#level-0:checked ~ .tree {
  display: block;
}

.pasta-1,
.pasta-2,
.pasta-3,
.pasta-4 {
  display: none;
}

#level-1:checked ~ .pasta-1 {
  display: block;
}

#level-2:checked ~ .pasta-2 {
  display: block;
}

#level-3:checked ~ .pasta-3 {
  display: block;
}

#level-4:checked ~ .pasta-4 {
  display: block;
}

/* LINKS */
.ficheiro {
  position: relative;
}

.ficheiro__link--root {
  color: red;
}

.ficheiro__link--level-1 {
  color: blue;
}

.ficheiro__link--level-2 {
  color: yellow;
}

.ficheiro__link--level-3 {
  color: green;
}

.ficheiro__link--level-4 {
  color: orange;
}

<input id="level-0" type="checkbox" /> 
<label for="level-0">_root</label>
<ul class="tree">
  <li class="ficheiro"><a class="ficheiro__link--root" href="#">ficheiro</a></li>
  <li class="ficheiro"><a class="ficheiro__link--root" href="#">ficheiro</a></li>
  <li>
    <input id="level-1" type="checkbox" />
    <label for="level-1">Pasta A</label>
    <ul class="pasta-1">
      <li class="ficheiro"><a class="ficheiro__link--level-1" href="#">ficheiro</a></li>
      <li class="ficheiro"><a class="ficheiro__link--level-1" href="#">ficheiro</a></li>
      <li class="ficheiro"><a class="ficheiro__link--level-1" href="#">ficheiro</a></li>
      <li>
        <input id="level-2" type="checkbox" />
        <label for="level-2">Pasta A - 1</label>
        <ul class="pasta-2">
          <li class="ficheiro"><a class="ficheiro__link--level-2" href="#">ficheiro</a></li>
          <li>
            <input id="level-3" type="checkbox" />
            <label for="level-3">Pasta dentro da pasta A - 1</label>
            <ul class="pasta-3">
              <li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
              <li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
              <li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
              <li>
                <input id="level-4" type="checkbox" />
                <label for="level-4">Pasta dentro da pasta dentro da pasta A -1</label>
                <ul class="pasta-4">
                  <li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
                  <li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
                  <li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
                  <li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
                  <li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
                </ul>
              </li>
              <li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
              <li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
            </ul>
          </li>
          <li class="ficheiro"><a class="ficheiro__link--level-2" href="#">ficheiro</a></li>
        </ul>
      </li>
      <li class="ficheiro"><a class="ficheiro__link--level-1" href="#">ficheiro</a></li>
    </ul>
  </li>
  <li class="ficheiro"><a class="ficheiro__link--root" href="#">ficheiro</a></li>
  <li class="ficheiro"><a class="ficheiro__link--root" href="#">ficheiro</a></li>
</ul>

尝试理解代码中发生的事情，以及为什么我按照我的方式构建它。这是最好的学习方式。同时，我会准备链接和解释，并在以后的编辑中附加。

编辑:

1. 您可以使用 w3c validator 验证代码.它会对你尖叫 因为我们缺少<!DOCTYPE html> , lang , title等等 但是 代码本身是有效的。
2. > MDN - li element :
   • 允许的 parent :<ul> , <ol> , 或 <menu>
   • 允许的内容:Flow content (基本上，any element 在 <body> 内有效)
3. > 30 CSS selectors you should know - 我们正在使用兄弟组合器 ~ (此 30 人名单中的第 9 名)
4. 使用 SASS 等预处理器可以使 CSS 代码更加简洁。和 mixins ，甚至是简单的嵌套。
5. 当您将元素定位到几层深度时，您将增加 specificity并使以后很难维护它。你可以试试这个 specificity calculator更好地理解它。这就是为什么最佳实践之一是使用类。通过良好的命名，代码基本上记录了自己，并且很清楚您的意图。只需查看类名称，您就可以立即知道哪个元素属于哪个级别。