在网页交互开发中，经常遇到不依赖JavaScript就能完成界面状态切换的需求。CSS的:checked伪类与兄弟选择器结合，正是解决这类问题的纯样式方案。它利用表单控件的选中状态作为信号源，通过文档结构中的兄弟关系将状态传递给其他元素，从而改变它们的显示效果。这种方法不仅减少了脚本体积，也避免了DOM操作带来的重绘开销。
理解:checked与兄弟选择器的匹配规则
:checked是CSS3引入的状态伪类，专门用于匹配处于选中状态的<input type="radio">、<input type="checkbox">以及<option>元素。当用户输入导致这些控件状态变化，浏览器会立即应用对应的样式规则。它自身并不改变布局，必须与其他选择器组合才能产生可见的交互效果。
兄弟选择器分为两种：相邻兄弟选择器+与通用兄弟选择器~。前者只选择紧接在指定元素之后的第一个同级元素，后者选择指定元素之后所有同级元素。在状态切换场景中，我们几乎总是使用~，因为受控内容往往不止一个节点，且不一定紧邻控件。例如input:checked ~ .panel表示当input被选中时，它后面的所有class为panel的同级元素都会匹配。
需要特别注意的是，兄弟选择器只能向下选择，不能向上或跨父级。因此HTML结构必须让<input>在前，受控元素在后，且二者共享同一个父容器。如果input被包裹在label内部，而目标元素在label外面，兄弟关系就会断裂，样式无法生效。这是很多初学者调试纯CSS切换时最容易忽略的点。
用单选框实现选项卡切换的完整示例
选项卡是最典型的应用。我们使用一组<input type="radio">，通过相同的name属性保证互斥，再用<label>包裹文字作为点击区域。每个radio后面跟随对应的内容面板，利用input:checked ~ .tab-content控制显隐。
下面的代码展示了一个三选项卡结构。默认所有面板隐藏，当某个radio被选中，它后面的对应面板变为显示状态。由于radio本身用绝对定位移出视口，用户实际点击的是label，但状态仍记录在input上。
<style>
.tabs input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tab-content {
display: none;
padding: 15px;
border: 1px solid #ccc;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
display: block;
}
.tabs label {
display: inline-block;
padding: 8px 16px;
cursor: pointer;
border: 1px solid #999;
}
</style>
<div class="tabs">
<input type="radio" name="tab" id="tab1" checked>
<input type="radio" name="tab" id="tab2">
<input type="radio" name="tab" id="tab3">
<label for="tab1">选项一</label>
<label for="tab2">选项二</label>
<label for="tab3">选项三</label>
<div class="tab-content" id="content1">这是第一个面板的内容</div>
<div class="tab-content" id="content2">这是第二个面板的内容</div>
<div class="tab-content" id="content3">这是第三个面板的内容</div>
</div>
在这个例子中，~选择器确保了无论label在input之后多远，只要同属.tabs容器，面板就能被正确匹配。如果误用+写成input:checked + #content1，由于input后紧邻的是下一个input而非内容面板，规则将完全失效。
这种方案的优点在于语义清晰、无脚本依赖，且切换过程可由CSS transition平滑处理。缺点是结构耦合度较高，当选项卡数量动态变化时，需要同步修改CSS规则。对于简单静态页面，它比引入前端框架更轻量。
复选框与兄弟选择器实现折叠与开关
除了单选框的互斥切换，<input type="checkbox">配合:checked还能实现独立的开合状态，例如侧边栏折叠、详情展开等。因为复选框不互斥，每个控件管理自己的状态，适合做多个互不干扰的开关。
以下示例用checkbox控制一个菜单的伸缩。通过input:checked ~ .menu在选中时改变高度与透明度，并添加过渡动画提升体验。这里同样遵循input前置、兄弟同级的布局原则。
<style>
.wrap input[type="checkbox"] {
position: absolute;
left: -9999px;
}
.menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: #f0f0f0;
}
#toggle:checked ~ .menu {
max-height: 200px;
}
</style>
<div class="wrap">
<input type="checkbox" id="toggle">
<label for="toggle">点击展开菜单</label>
<ul class="menu">
<li>首页</li>
<li>文章</li>
<li>关于</li>
</ul>
</div>
该方式的局限在于max-height需要预设足够大的值，若内容动态增长可能裁剪或留白。此时可结合display切换或改用grid布局的grid-template-rows从0fr到1fr的动画来获得更精确的折叠效果，但核心依旧是:checked与~的兄弟传递。
在复杂组件中，还可以将多个checkbox与radio组合，用不同name分组，实现如筛选器多维度展开。只要牢记文档流顺序与同级约束，纯CSS交互的边界会比想象中更广，且在禁用JavaScript的环境下仍能保持基础可用性。
css_checked兄弟选择器状态切换修改时间：2026-08-17 07:44:14