如何修复details标签中嵌套分组符号显示异常的问题

问题原因 #

你当前使用的CSS选择器没有限制匹配层级，只要父级details处于open状态，就会命中所有嵌套层级下的summary元素，导致折叠状态的子分组符号也被错误覆盖为-。

解决方案 #

调整CSS选择器，使用直接子匹配符>，让符号规则仅作用于自身处于展开状态的details对应的summary：

/* 隐藏默认的系统箭头样式 */
.treeHTML summary {
  list-style: none;
}
.treeHTML summary::-webkit-details-marker {
  display: none;
}

/* 折叠状态默认显示+ */
.treeHTML details > summary::before {
  content: '+';
  display: inline-block;
  width: 1em;
  margin-right: 4px;
}

/* 仅自身展开时显示-，不受父级展开状态影响 */
.treeHTML details[open] > summary::before {
  content: '-';
}

你提供的对应HTML结构如下：

<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>

修改后每个分组的符号只会跟随自身的折叠状态变化，父级展开不会影响子折叠分组的符号显示。

内容的提问来源于stack exchange，提问作者Acces969