缩进所有孩子

Question

我不确定为什么这不起作用我的期望：

HTML

<details>
  <summary>SomeObject</summary>
  <details>
    <summary>SomeObject</summary>
    <div>someField: 1</div>
    <div>someOther: "abc"</div>
  </details>
  <div>someField: [1,2,3]  </div>
</details>

CSS

details > * {
  margin-left: 10em;
}

我的期望是：

> SomeObject
  > SomeObject
    someField: 1
    someOther: "abc"
  someField: [1,2,3]

但是我得到的是：

> SomeObject
  > SomeObject
  someField: 1
  someOther: "abc"
someField: [1,2,3]

我不明白因为details > *是为了选择所有细节的孩子吗？因此，我应该将所有细节包括在内，其中包括<div> someField: [1,2,3]</div> ......但是，在这种情况下，这不会因为某些原因而受到影响......我无法解释原因。有任何想法吗？

details > * {
  margin-left: 10em;
}

<details>
  <summary>SomeObject</summary>
  <details>
    <summary>SomeObject</summary>
    <div>someField: 1</div>
    <div>someOther: "abc"</div>
  </details>
  <div>someField: [1,2,3]  </div>
</details>

Answer 1

margin是相对于父母的。第二个div元素中的details将继承其父级的margin，并且还应用了额外的margin。

考虑这个例子：

details>* {
  margin-left: 10em;
  background: yellow;
}

details {
  background: pink;
}

details details {
  background: rgba(0,0,0,.1);
}

<details>
  <summary>margin-left</summary>
  <details>
    <summary>margin-left + margin-left</summary>
    <div>margin-left + margin-left</div>
    <div>margin-left + margin-left</div>
  </details>
  <div>margin-left</div>
</details>

您需要应用额外的左边距，以便最后一个div根据需要对齐。一个很好的方法来定位div是only-of-type选择器。

例

details>* {
  margin-left: 10em;
}

details div:only-of-type {
  margin-left: 20em;
}

<details>
  <summary>margin-left</summary>
  <details>
    <summary>margin-left + margin-left</summary>
    <div>margin-left + margin-left</div>
    <div>margin-left + margin-left</div>
  </details>
  <div>margin-left 20em</div>
</details>

根据评论更新

details>* {
  margin-left: 10em;
}

details> :first-child {
  margin-left: 0;
}

<details>
  <summary>SomeObject</summary>
  <details>
    <summary>SomeObject</summary>
    <div>someField: 1</div>
    <div>someOther: "abc"</div>
  </details>
  <div>someField: [1,2,3]  </div>
</details>

Answer 2

用这个：

details>*{
  margin-left: 2em;
}
details div{
  margin-left: 4em;
}

<details>
  <summary>SomeObject</summary>
  <div>someField: [1,2,3] </div>
  <details>
    <summary>SomeObject</summary>
    <div>someField: 1</div>
    <div>someOther: "abc"</div>
    <details>
    <summary>SomeObject</summary>
    <div>someField: 1</div>
    <div>someOther: "abc"</div>
  </details>
  </details>
</details>

Answer 3

我的朋友想出了这个：

details > *:not(summary){
  margin-left: 2em;
}

<details>
  <summary>SomeObject</summary>
  <details>
    <summary>SomeObject</summary>
    <details>
      <summary>SomeObject</summary>
      <div>someField: 1</div>
      <div>someOther: "abc"</div>
    </details>
    <div>someField: 1</div>
    <div>someOther: "abc"</div>
  </details>
  <div>someField: [1,2,3]  </div>
</details>

我喜欢它主要是因为我不必列出详细信息标签的子项的所有潜在标签。