元素关闭时其内部特定子元素仍保持可见
" />
通过纯 CSS 无法绕过 <details> 的默认渲染行为使内部元素在折叠状态下可见；必须借助 JavaScript 克隆目标元素并移出 <details> 容器，同时隐藏原始副本，从而实现视觉上的“始终可见”效果。
通过纯 css 无法绕过 `` 的默认渲染行为使内部元素在折叠状态下可见；必须借助 javascript 克隆目标元素并移出 `` 容器，同时隐藏原始副本，从而实现视觉上的“始终可见”效果。
<details> 标签的规范行为是：当处于 closed 状态时，浏览器会自动将 <details> 内部除 <summary> 外的所有内容设为不可见（通常等效于 display: none），且该行为由用户代理样式强制控制，无法通过常规 CSS（如 visibility: visible、position: absolute 或 display: block）覆盖。这意味着任何试图仅用样式“强行显示”内部元素的尝试都会失败。
✅ 正确可行的方案是：使用 JavaScript 将目标元素克隆一份，并将其插入到 <details> 元素外部（例如紧随其后），再隐藏原始副本。这样既不破坏语义结构（原 DOM 层级不变），又实现了视觉上“始终可见”的效果。
以下是一个简洁、健壮的实现示例：
<details> <summary>Category</summary> <p>A paragraph</p> <p class="always-visible">Another paragraph</p> </details>
.always-visible {
display: none; /* 隐藏原始副本 */
}document.addEventListener('DOMContentLoaded', () => {
const details = document.querySelector('details');
const target = details.querySelector('.always-visible');
if (target) {
const clone = target.cloneNode(true);
clone.classList.remove('always-visible'); // 可选：清理类名避免样式冲突
details.after(clone);
}
});⚠️ 注意事项：
- 此方法确实修改了 DOM 结构（新增节点），但无需改动原始 HTML 语义层级，兼容性良好（支持所有现代浏览器及 IE11+）；
- 若目标元素含内联事件监听器（如 onclick 属性）或通过 addEventListener 绑定的交互逻辑，克隆后不会自动继承——需手动重新绑定或改用事件委托；
- 响应式布局中，需确保克隆元素的定位与原上下文协调（例如父容器 position: relative 可能影响 absolute 子元素）；
- 如需支持多个 <details>，应遍历所有匹配项，而非仅取首个。
总结：<details> 的可见性由浏览器原生控制，CSS 无权干预其渲染开关。唯一可靠、无需重构 HTML 结构的方案，就是克隆 + 移位 + 隐藏原始节点。这一模式兼顾可访问性（屏幕阅读器仍能感知原始结构）、语义完整性与视觉需求，是当前标准下的最佳实践。
