如何用CSS实现点击目录时自动展开对应的details组件？

要实现点击目录链接时自动展开对应的details区块，只需在现有CSS代码中添加一行控制open属性的声明即可，具体修改如下：

修改后的CSS代码 #

details:target {
    border: double green;
    box-shadow: 0px 0px 5px 5px #f77;
    open: true; /* 强制展开目标details区块 */
}

补充说明 #

1. 核心原理：details元素的展开状态由open属性控制，通过details:target选择器匹配URL锚点对应的区块，再用CSS设置open: true就能强制该区块展开。
2. HTML结构修正：原HTML中列表项<li>未包裹在<ul>或<ol>内，不符合HTML规范，建议修正为：

<h1>TOC</h1>
<ul>
  <li><a href="#1">section 1</a></li>
  <li><a href="#2">section 2</a></li>
</ul>

<details id="1">
  <summary> <h1>a folding section</h1></summary>
  <p> normally hidden, but show if selected in TOC, or summary clicked on.</p>
</details>
<details id="2">
  <summary> <h1>another folding section</h1></summary>
  <p>…</p>
</details>

3. 交互兼容性：该方案不会影响summary的原生点击切换功能——用户点击summary时，仍能正常切换区块的展开/折叠状态；仅当通过目录链接跳转（锚点匹配）时，CSS才会强制展开目标区块。

内容的提问来源于stack exchange，提问作者ctrl-alt-delor