Question

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

我看到我们可以用“ ul”和“ li”创建树，但是我必须使用divs）=

#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

您应该改用此+选择器，它选择放置在前面的辅助选择器之后的元素：

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

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

如果您在其下还有另一个.element div，请添加以下规则，并结合~和+：

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

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

Answer 2

您可以将.element div嵌套在标题div中。只需将height元素上的min-height更改为#container div。

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

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

.title {
  background-color: blueviolet;
}

.element {
  background-color: greenyellow;
  margin-top: 10px;
}

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

[data-id=title-3] {
  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 class="element">Element A</div>
  </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 class="element">Element B</div>
  </div>
  
  <div class="title" data-id="title-1">Title 1</div>
  <div class="title" data-id="title-2">
    Title 2
    <div class="element">Element C</div>
  </div>
</div>

Answer 3

一个怪异的主意，但如果您知道大概有多少个连续的部分，则可能会起作用。

此示例适用于连续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>

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

如何用div创建树

3 个答案: