如何仅用 CSS 实现复选框控制内容显隐

本文介绍一种无需 javascript 的纯 css 方案，利用 :checked 伪类与相邻兄弟选择器（+）实现点击复选框切换关联内容的显示与隐藏。

在现代前端开发中，有时我们希望以最轻量的方式实现交互效果——比如点击一个复选框，动态显示或隐藏一组选项。虽然 JavaScript 是常规解法，但纯 CSS 同样可以优雅完成，关键在于正确使用 :checked 伪类 和 相邻兄弟选择器 +。

✅ 正确的 HTML 结构是前提

CSS 的 + 选择器只能匹配紧跟在前一元素之后的同级兄弟元素。因此，目标容器（如 .checkbox）必须紧接在 元素之后，且二者处于同一父级下：

  

    Pincha para recibir información:
    
    
    

      
 Tenerife
      
 Gran Canaria
立即学习“前端免费学习笔记（深入）”；
      
 Lanzarote
      
 Fuerteventura

							

								
								

									ChatX翻译
									
最实用、可靠的社交类实时翻译工具。 支持全球主流的20+款社交软件的聊天应用，全球200+语言随意切换。 让您彻底告别复制粘贴的翻译模式，与世界各地高效连接！
								
								下载 
							
						
      
 La Palma
      
 El Hierro
      
 La Gomera
    
  

⚠️ 注意：原代码中 id="expand" 的 被错误地赋予了 class="checkbox"，这会干扰选择器逻辑。应将 class="checkbox" 仅用于被控制的容器 ，而复选框本身建议使用语义化类名（如 toggle-checkbox）或仅依赖 id。

✅ 对应的纯 CSS 规则

只需两行核心样式即可实现显隐控制：

/* 默认隐藏目标容器 */
.checkbox {
  display: none;
}

/* 当 #expand 处于选中状态时，显示其后紧邻的 .checkbox */
#expand:checked + .checkbox {
  display: block;
}

该方案完全依赖浏览器原生支持（所有现代浏览器均兼容），无 JS 依赖、无额外事件监听、无重排风险，性能极佳。

? 常见误区与修复

• ❌ 错误写法：#expand:checked .checkbox → 这是在查找 #expand 内部的子元素，但 .checkbox 是其兄弟，非后代；
• ❌ 错误结构：.checkbox 不紧跟在 #expand 后（中间插入其他标签、换行符不影响，但 DOM 顺序不可变）；
• ❌ 类名冲突：复选框自身不应有 class="checkbox"，否则 #expand:checked + .checkbox 将尝试匹配它自己（无效）。

? 进阶提示（可选优化）

• 添加平滑过渡效果（注意：display 不可动画，可改用 opacity + max-height 或 visibility 配合 height）：

  .checkbox {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
  }
  #expand:checked + .checkbox {
    opacity: 1;
    max-height: 500px; /* 设为足够容纳内容的高度 */
  }

• 若需支持“非相邻”元素，可借助 的 for 属性 + :has()（目前仅 Chrome 105+ / Safari 15.4+ 支持，暂不推荐生产环境使用）。

总结：纯 CSS 显隐控制的核心在于结构可控性与选择器精准性。只要确保复选框与目标容器为相邻兄弟关系，并合理运用 :checked + selector，即可零 JS 实现简洁、可靠、高性能的交互体验。