如何仅用CSS选择同class非相邻兄弟元素实现表单切换？

核心思路 #

利用CSS的:has()选择器（现代主流浏览器支持）结合表单元素的name属性分组，配合通用兄弟选择器，无需为每个表单块添加专属class或重复编写ID选择器。若需兼容旧浏览器，可通过轻量属性标记结合通用兄弟选择器实现。

实现代码 #

HTML结构（符合flex布局要求）

<form class="form-container">
  <!-- 首行单选框组 -->
  <label>
    <input type="radio" name="form-type" checked> 表单A
  </label>
  <label>
    <input type="radio" name="form-type"> 表单B
  </label>

  <!-- 后续行的表单内容 -->
  <div class="form-content">
    <div>表单A的内容：<input type="text" placeholder="输入A相关内容"></div>
  </div>
  <div class="form-content">
    <div>表单B的内容：<input type="text" placeholder="输入B相关内容"></div>
  </div>
</form>

CSS样式

.form-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* 让单选框标签保持在首行，表单内容自动换行 */
.form-container label {
  flex: 0 0 auto;
}

/* 默认隐藏所有表单内容 */
.form-content {
  display: none;
  flex: 1 0 100%; /* 强制表单内容占满整行 */
}

/* 利用:has()匹配勾选状态，显示对应表单内容 */
.form-container:has(input[name="form-type"]:first-of-type:checked) .form-content:first-of-type,
.form-container:has(input[name="form-type"]:nth-of-type(2):checked) .form-content:nth-of-type(2) {
  display: block;
}

兼容性方案（不依赖:has()） #

如果需要兼容不支持:has()的浏览器，可通过轻量属性标记匹配：

<form class="form-container">
  <label>
    <input type="radio" name="form-type" data-target="1" checked> 表单A
  </label>
  <label>
    <input type="radio" name="form-type" data-target="2"> 表单B
  </label>

  <div class="form-content" data-id="1">
    <div>表单A的内容：<input type="text" placeholder="输入A相关内容"></div>
  </div>
  <div class="form-content" data-id="2">
    <div>表单B的内容：<input type="text" placeholder="输入B相关内容"></div>
  </div>
</form>

.form-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form-container label {
  flex: 0 0 auto;
}

.form-content {
  display: none;
  flex: 1 0 100%;
}

/* 通过属性选择器+通用兄弟选择器匹配对应内容 */
input[name="form-type"][data-target="1"]:checked ~ .form-content[data-id="1"],
input[name="form-type"][data-target="2"]:checked ~ .form-content[data-id="2"] {
  display: block;
}

优势说明 #

• 无需为每个表单块编写专属class（如a-form/b-form）或重复ID选择器，新增表单仅需按结构扩展即可
• 完全通过CSS实现，无需JS介入
• flex布局结构不受影响，单选框与标签保持在首行，表单内容自动换行

内容的提问来源于stack exchange，提问作者Sami Dahoux Bendou