:checked伪类通过选中状态触发样式变化，结合label和兄弟选择器可实现自定义复选框、展开收起面板及主题切换等交互效果，核心是隐藏input、用label控制状态并以CSS响应。
在CSS中，:checked 伪类可以用来选择处于“选中”状态的单选按钮（radio）或复选框（checkbox）。虽然它本身不能直接响应用户的交互动作，但结合HTML标签和相邻兄弟选择器等机制，可以实现无需JavaScript的交互式界面效果。
基本原理：利用 :checked 状态切换样式
:checked 会匹配所有被用户选中的 或 元素。一旦这些输入控件被勾选，就可以通过CSS改变它们自身或关联元素的外观。
- 隐藏原始输入框，用自定义样式替代
- 通过
label标签控制 input 的选中状态 - 使用
+或~选择器影响后续元素的显示
示例1：自定义复选框样式
将默认的 checkbox 替换为视觉更美观的样式。
HTML结构：CSS样式：
#custom-checkbox {
display: none;
}
#custom-checkbox + label {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
position: relative;
cursor: pointer;
}
#custom-checkbox:checked + label::after {
content: "✔";
color: #4CAF50;
font-size: 16px;
position: absolute;
top: -1px;
left: 3px;
}
当用户点击 label 时，checkbox 被选中，:checked 生效，显示对勾符号。
立即学习“前端免费学习笔记（深入）”；
示例2：展开/收起内容区域
使用 checkbox 和 :checked 实现可折叠面板。
PHPShops多用户商城系统
下载
随着电子商务模式更加多样化，企业和个人的迫切需求，PHPShops多用户商城系统正可以为其提供专业的电子商务解决方案。社区化电子商务，主要面向行业类和地方门户类站点。 PHPShops多用户商城系统（简称PHPShops）是基于电子商务的一套平台交易系统，它采用目前最流行网站建设工具PHP＋MYSQL，实现模版分离技术，通过HTML交互式网页技术来实行客户端与服务器端的交流。无论在
CSS：这里是被隐藏的内容。
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
#toggle-content:checked ~ .content {
max-height: 100px;
}
利用 ~ 通用兄弟选择器，在 checkbox 被选中时，动态改变后面内容块的高度，实现平滑展开动画。
示例3：单选按钮切换主题风格
用 radio 按钮切换页面配色方案。
HTML：CSS：页面内容
#dark:checked ~ .theme-area {
background: #333;
color: white;
}
#light:checked ~ .theme-area {
background: white;
color: black;
}
通过两个互斥的 radio 按钮，控制同一区域的不同视觉表现。
基本上就这些。利用 :checked 配合 label 和选择器，能实现开关、菜单、选项卡甚至轻量级模态框等交互效果，适合静态页面或需要减少JS依赖的场景。关键是把 input 隐藏，用 label 做触发入口，再用CSS响应状态变化。
