标签关闭时其内部特定元素仍保持可见 " />

无法仅通过 CSS 实现 <details> 关闭时内部某子元素（如第二个 <p>）持续显示；必须借助 JavaScript 克隆并移出该元素，再配合 CSS 隐藏原始副本，从而在视觉上达成“穿透控制”的效果。

无法仅通过 css 实现 `

` 关闭时内部某子元素（如第二个 `

`）持续显示；必须借助 javascript 克隆并移出该元素，再配合 css 隐藏原始副本，从而在视觉上达成“穿透控制”的效果。

<details> 元素的显示逻辑由浏览器原生控制：当其 open 属性为 false（即折叠状态）时，所有非 <summary> 的子元素会被隐式隐藏（等效于 display: none），且该行为无法被常规 CSS（如 visibility: visible、position: absolute 或 display: block）覆盖。这是 HTML 规范定义的渲染约束，并非样式优先级问题。

因此，若需让某个子元素（例如示例中的第二个 <p>）始终可见，唯一可行的纯前端方案是修改 DOM 结构——将目标元素克隆一份并移至 <details> 外部，同时隐藏原始副本。

以下为推荐实现方式：

<details>
  <summary>Category</summary>
  <p>A paragraph</p>
  <p class="persistent">Another paragraph</p>
</details>

.persistent {
  display: none; /* 隐藏原始副本 */
}

document.addEventListener('DOMContentLoaded', () => {
  const details = document.querySelector('details');
  const target = details.querySelector('.persistent');

  if (target) {
    const clone = target.cloneNode(true);
    clone.classList.remove('persistent'); // 可选：清理样式类
    details.after(clone);
  }
});

✅ 关键说明：

• 此方案不破坏原有语义结构（<details> 仍完整保留），仅新增一个独立节点；
• 克隆后的元素脱离 <details> 的渲染上下文，不再受其 open 状态影响；
• 若需响应 <details> 的展开/收起事件（如动态更新内容），可监听 toggle 事件进一步增强交互逻辑；
• 注意样式继承与布局影响：克隆元素位于 <details> 后，可能受后续兄弟元素样式干扰，建议为其添加独立容器或重置关键 CSS（如 margin-top）。

⚠️ 重要提醒：
严格意义上的“不操作 DOM 结构”在此场景下不可行。任何声称仅用 CSS 实现该效果的方案（如 all: unset、contain: layout 等）均无效——浏览器对 <details> 内容的隐藏是渲染层强制行为，不属于 CSS 层面的样式控制范畴。