如何将动态生成的radio button标签与对应content div通过CSS实现联动

纯CSS实现方案有两种，可根据你的场景选择： #

方案1：DOM顺序匹配（兼容性最优，不依赖新CSS特性）

只要你保证动态生成radio的顺序，和.content容器下对应内容div的顺序完全一一对应，就不需要依赖ID匹配，用nth-of-type选择器即可适配任意数量的动态标签：

1. 先给所有radio按钮加统一类名.tab-radio，所有内容div加统一类名.tab-content-item
2. CSS规则如下：

/* 默认隐藏所有内容项 */
.tab-content-item {
  display: none;
}
/* 按顺序匹配选中状态，最多写到你可能生成的最大tab数量即可，多余规则不会报错 */
.tab-radio:nth-of-type(1):checked ~ .content .tab-content-item:nth-of-type(1),
.tab-radio:nth-of-type(2):checked ~ .content .tab-content-item:nth-of-type(2),
.tab-radio:nth-of-type(3):checked ~ .content .tab-content-item:nth-of-type(3),
/* 可继续往下写到你需要的最大数量，比如100 */
.tab-radio:nth-of-type(100):checked ~ .content .tab-content-item:nth-of-type(100) {
  display: block;
}

你原本用于关联label和radio的ID可以保留，不需要修改原有DOM生成逻辑。

方案2：自定义属性绑定（使用CSS has()，顺序不一致也可用）

如果tab和内容的排列顺序无法保证一致，用自定义属性做关联即可：

1. 动态生成元素时，给每个radio加data-tab-suffix属性，值为ID里的xxx部分（比如tab-100就填100），对应的内容div也加同样的data-tab-suffix属性和值
2. CSS规则如下：

.tab-content-item {
  display: none;
}
/* 匹配相同后缀的选中tab和对应内容 */
:has(.tab-radio[data-tab-suffix]:checked) .tab-content-item[data-tab-suffix] {
  display: block;
}

该方案对浏览器版本有一定要求，Chrome 105+、Firefox 121+、Safari 15.4+均支持has()选择器，覆盖90%以上的全球用户。

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