如何使用CSS :target选择器创建可复用模态框 解决重复ID失效问题

• 收集了大量濒危语言谚语素材，需要为每条谚语配置模态框展示多版本转写内容，避免页面内容杂乱
• 已基于CSS :target选择器实现点击div展开附加信息的效果，希望直接复用现有代码逻辑，无需为每条谚语单独设置唯一类名或ID
• 当前存在问题：点击列表中任意位置的谚语条目，始终只会展开第一个div模态框
• 诉求：共有数百条谚语条目，需要实现无需为每个条目单独配置专属标识，点击对应谚语即可触发对应模态框展开的效果

CSS部分 #

#modalBox {
  display: block;
  position: relative;
  text-align: left;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.4s;
  padding: 5px;
  margin-bottom: 2rem;
  height: 2.5rem;
  width: 100%;
  max-width: 800px;
}

#modalBox:target {
  height: 13.5rem;
}

HTML部分 #

<div class="proverbs">
  <div id="modalBox">
    <a href="#modalBox"> A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</a>
    <p id="data"><b>IPA:</b> a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</p>
    <p id="data"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
    <p id="data"><b>English:</b> The hasty cat makes blind kittens.</p>
    </p>
    <a href="#" class="modalclose">&times;</a>
  </div>
</div>

1. HTML规范要求id属性在整个页面中全局唯一，所有模态框都设置相同的id="modalBox"时，浏览器锚点跳转永远只会匹配第一个同ID元素，因此:target选择器永远只生效在第一个模态框上
2. 代码中重复使用id="data"同样不符合HTML规范，会导致样式、脚本匹配异常

完全不需要为每条谚语设置唯一ID/类名，零额外全局脚本，直接复用原有样式的展开动效，使用原生HTML的<details>+<summary>标签实现即可，天然支持独立展开折叠，复制多少条条目都不会出现串扰，也不会出现锚点跳转导致的页面错位问题。

修改后的代码如下：

调整后的CSS #

.proverb-card {
  display: block;
  position: relative;
  text-align: left;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.4s;
  padding: 5px;
  margin-bottom: 2rem;
  height: 2.5rem;
  width: 100%;
  max-width: 800px;
}

/* 展开时高度与原有逻辑一致 */
.proverb-card[open] {
  height: 13.5rem;
}

/* 隐藏原生默认三角标记，匹配原有交互样式 */
.proverb-card summary {
  list-style: none;
  cursor: pointer;
}
.proverb-card summary::-webkit-details-marker {
  display: none;
}

/* 关闭按钮样式 */
.modalclose {
  position: absolute;
  right: 10px;
  top: 5px;
  text-decoration: none;
  font-size: 1.2rem;
}

.data-item {
  margin: 0.3rem 0;
}

调整后的HTML（可无限复制条目，无需修改类名/ID） #

<div class="proverbs">
  <!-- 单条谚语模板，复制这段结构新增条目即可，无需加任何专属id -->
  <details class="proverb-card">
    <summary> A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</summary>
    <p class="data-item"><b>IPA:</b> a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</p>
    <p class="data-item"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
    <p class="data-item"><b>English:</b> The hasty cat makes blind kittens.</p>
    <a href="#" class="modalclose" onclick="this.closest('.proverb-card').removeAttribute('open')">&times;</a>
  </details>

  <!-- 第二条示例 -->
  <details class="proverb-card">
    <summary>第二条谚语原文内容</summary>
    <p class="data-item"><b>IPA:</b> 第二条IPA转写</p>
    <p class="data-item"><b>Italian:</b> 第二条意大利语翻译</p>
    <p class="data-item"><b>English:</b> 第二条英语翻译</p>
    <a href="#" class="modalclose" onclick="this.closest('.proverb-card').removeAttribute('open')">&times;</a>
  </details>
</div>

方案优势：

• 结构完全可复用，不需要给单条条目设置任何唯一ID或专属类名
• 原生支持点击展开/折叠，点哪条开哪条，不会出现串扰
• 保留原有高度过渡动画效果，视觉表现和之前的实现完全一致
• 仅用1行极简单的内联逻辑实现关闭按钮功能，不需要额外编写全局脚本
• 修复了原代码中ID重复的规范问题

如果一定要保留:target的实现逻辑，只需要在批量生成条目时给每个模态框自动生成递增ID（比如modalBox-1/modalBox-2），内部锚点的href对应匹配即可，但这种方案会出现锚点跳转导致页面滚动的问题，交互体验不如原生details方案。

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