html - 如何用div创建树

Question

我尝试根据之前的元素创建具有多个缩进级别的 div。

我看到我们可以用“ul”和“li”创建树，但我必须为我的情况使用 div )=

#container {
  border: 2px solid black;
  padding: 10px;
}

#container div {
  height: 30px;
  border: 1px solid black;
}

.title {
  background-color: blueviolet;
}

.element {
  background-color: greenyellow;
}

[data-id=title-2] {
  margin-left: 20px;
}

[data-id=title-3] {
  margin-left: 40px;
}

#container [data-id=title-2]~.element {
  margin-left: 20px;
}

#container [data-id=title-3]~.element {
  margin-left: 40px;
}

<div id="container">
  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">Element A</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="title" data-id="title-3">Title 3</div>
  <div class="element">Element B</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">Element C</div>
</div>

我希望我的“元素 C”与我的“title-2”对齐，因为它前面有一个“title-2”。

https://jsfiddle.net/ghncdfpt/

如果你有任何线索可以帮助我，谢谢。

Answer 1

这是一个老掉牙的想法，但如果您知道大约有多少个连续的部分，它可能会奏效。

此示例适用于 4 个连续的部分。注意最后一个是怎么错的:

#container {
  border: 2px solid black;
  padding: 10px;
}

#container div {
  height: 30px;
  border: 1px solid black;
}

.title {
  background-color: blueviolet;
}

.element {
  background-color: greenyellow;
}

[data-id=title-2] {
  margin-left: 20px;
}

[data-id=title-3] {
  margin-left: 40px;
}

[data-id=title-2]~.element,
[data-id*=title]~.element~[data-id=title-2]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-2]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-2]~.element {
  margin-left: 20px;
}

[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element {
  margin-left: 40px;
}

<div id="container">
  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">Element A</div>
  <div class="element">Element A</div>
  <div class="element">Element A</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="title" data-id="title-3">Title 3</div>
  <div class="element">Element B</div>
  <div class="element">Element B</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">Element C</div>
  <div class="element">Element C</div>
  <div class="element">Element C</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="title" data-id="title-3">Title 3</div>
  <div class="element">Element D</div>
  <div class="element">Element D</div>
  <div class="element">Element D</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">wrong</div>
  <div class="element">wrong</div>
  <div class="element">wrong</div>
</div>

我们可以添加更多选择器，最后一部分将起作用:

#container {
  border: 2px solid black;
  padding: 10px;
}

#container div {
  height: 30px;
  border: 1px solid black;
}

.title {
  background-color: blueviolet;
}

.element {
  background-color: greenyellow;
}

[data-id=title-2] {
  margin-left: 20px;
}

[data-id=title-3] {
  margin-left: 40px;
}

[data-id=title-2]~.element,
[data-id*=title]~.element~[data-id=title-2]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-2]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-2]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-2]~.element {
  margin-left: 20px;
}

[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element,
[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id*=title]~.element~[data-id=title-3]~.element {
  margin-left: 40px;
}

<div id="container">
  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">Element A</div>
  <div class="element">Element A</div>
  <div class="element">Element A</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="title" data-id="title-3">Title 3</div>
  <div class="element">Element B</div>
  <div class="element">Element B</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">Element C</div>
  <div class="element">Element C</div>
  <div class="element">Element C</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="title" data-id="title-3">Title 3</div>
  <div class="element">Element D</div>
  <div class="element">Element D</div>
  <div class="element">Element D</div>

  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">Title 2</div>
  <div class="element">correct</div>
  <div class="element">correct</div>
  <div class="element">correct</div>
</div>

这背后的技巧是我们在上一节的基础上增加了特异性，以确保我们始终应用正确的样式