如何修复"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选择器略有关闭：

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

这将选择所有summary元素，这些元素是打开的details元素的子元素(包括非直接子元素)

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

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