如何修复 "details" 标签中嵌套分组符号的错误显示？

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 select或公开的细节略有偏差：

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

这将 select 所有 summary 开放细节元素的子元素（包括非直接子元素）

只select只公开详细信息的直子，你应该使用> select或：

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

如何修复 "details" 标签中嵌套分组符号的错误显示？

How to fix incorrect display of the nested grouping symbol in the "details" tag?

html

css

hierarchy