如何修复“详细信息”标签中嵌套分组符号的错误显示？

Question

如果顶层展开，那么所有嵌套层都被分配“-”符号，即使它们被折叠： jsfiddle.net/acces969/4eh6puvk/1/

<div class="treeHTML">Root
  <div>level 1
    <details><summary></summary>
      <div >level 2
        <details><summary></summary>
          <div >
            level 3
          </div>
        </details>
      </div>
    </details>
  </div>
</div>

Answer 1

您的开放细节的 CSS 选择器有点偏离：

.treeHTML details[open] summary:before {/* styles */}

这将选择所有 summary 元素，它们是开放详细信息元素的子元素（包括非直接子元素）

要仅选择打开的详细信息的直接子级，您应该使用> 选择器：

.treeHTML details[open] > summary:before {/* styles */}