如何让<details>标签未展开时内部指定元素可见？

浏览器默认会在<details>未展开（无open属性）时，隐藏所有<summary>之外的子元素，核心是通过覆盖这一默认行为，选择性保留目标元素的可见性。

方案一：直接控制元素的display属性 #

通过精准选择器，只隐藏不需要显示的元素，保留目标<p>的可见状态：

/* 覆盖浏览器默认的非summary元素隐藏规则 */
details:not([open]) > :not(summary) {
  display: none;
}

/* 让第二个p元素在未展开时保持显示 */
details:not([open]) > p:last-of-type {
  display: block;
  /* 可选：调整间距，避免和summary紧贴 */
  margin-top: 8px;
}

方案二：利用定位脱离文档流（适合需要固定位置的场景） #

如果希望目标元素不受<details>闭合状态的布局限制，可以用定位让它脱离文档流：

details {
  position: relative;
  /* 可选：给目标元素预留空间，避免遮挡其他内容 */
  padding-bottom: 2em;
}

/* 未展开时隐藏第一个p元素 */
details:not([open]) > p:first-of-type {
  display: none;
}

/* 未展开时让第二个p元素脱离文档流，显示在summary下方 */
details:not([open]) > p:last-of-type {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 8px 0 0;
}

/* 展开时恢复目标元素的正常布局 */
details[open] > p:last-of-type {
  position: static;
}

原理说明 #

浏览器的默认样式中，details:not([open]) > :not(summary)会被设置为display: none，我们通过更具体的选择器（比如p:last-of-type）覆盖这一规则，让指定元素保持可见。两种方案都不需要修改原DOM结构，完全通过CSS实现需求。

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