Question

我为此进行了2天的战斗，这可能很简单，但我没有到达目的地。我想要一个具有多个级别的漂亮，整洁的树视图，并且尝试将根对象定位为第一个孩子。我可以做到，但是我敢肯定使用〜和+号可能会更简单。其次，我需要复选框来打开/关闭树。我知道我总是可以使用预制的，但是我需要学习。有什么帮助吗？没有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>

小提琴

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>

试着理解代码中正在发生的事情，以及为什么我按照自己的方式构造它。这是最好的学习方式。同时，我将准备链接和说明，并将其添加到以后的编辑中。

编辑：

您可以使用w3c validator验证代码。它会向你尖叫因为我们缺少<!DOCTYPE html>，lang，title等，但是该代码本身是有效的。
MDN - li element：
- 允许的父母：<ul>，<ol>或<menu>
- 允许的内容：Flow content（基本上是any element，在<body>内有效）
30 CSS selectors you should know-我们使用的是同级组合器~（此30个列表中的第9个）
使用SASS和mixins之类的预处理器，甚至使用简单的嵌套，CSS代码都可能更加简洁。
当您将元素定位到几个级别的深处时，您将增加specificity并使其在以后很难维护。您可以尝试使用此specificity calculator来更好地理解它。这就是为什么最佳实践之一是使用类。有了良好的命名，代码基本上可以自己编写文件，并且很清楚您的意图是什么。您只需查看类名，即可立即知道哪个元素属于哪个级别。

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

1 个答案: