基础原理与语法要点
什么是 :checked 伪类
CSS 中的 :checked 伪类用于标记已经被用户选中的表单控件，如复选框、单选按钮等。当某个控件处于选中状态时，紧随其后的选择器可以触发样式变化。通过这种方式，可以在不修改 HTML 结构的前提下实现丰富的交互效果。
关键点在于把需要改变样式的目标元素放在与被选控件有合适的关系的位置，例如相邻兄弟选择器（+）或通用兄弟选择器（~）之后。只有在选择器链达到目标元素时，才会在选中状态下生效。
如何通过相邻与通用同胞选择器触发样式
相邻同胞选择器 (+)用于选中控件后的紧随元素。它的优点是简单直观，适合一对一的样式切换场景。
通用同胞选择器 (~)则可以作用于同一父节点下的后续所有同胞元素，适合一次性对多处目标应用同一个状态的变化。
状态文本
附加文本
/* 颜色随选中状态改变：相邻同胞示例 */
#cb1:checked + label.txt {color: #e91e63;font-weight: bold;transition: color .25s ease;
}/* 多个目标随同胞状态改变示例（后续元素） */
#cb2:checked ~ .status,
#cb2:checked ~ .status2 {color: #4caf50;
}
常见实现示例
案例：勾选框控制文本颜色
场景一：通过勾选框控制旁边文本的颜色变化，用户直观感知“开启/关闭”的状态。
实现要点：把文本元素放在勾选框后面，通过 :checked + label 选择器实现样式切换，并确保 label 的点击区域与勾选框一致。
/* 当选中时，文本颜色变成红色 */
#case1:checked + .case1-label {color: #e53935;font-weight: 600;
}
.case1-label {color: #555;transition: color .25s ease;cursor: pointer;
}
案例：自定义开关切换背景颜色
场景二：利用复选框实现一个自定义开关控件，选中与未选中状态分别对应不同的背景。
实现要点：以复选框为输入端，使用一个标签作为开关外观，利用 :checked + label 实现背景切换与滑块位移。
/* 开关外观：未选中状态 */
.switch {display: inline-block;width: 54px;height: 28px;border-radius: 14px;background: #ccc;position: relative;vertical-align: middle;transition: background .25s ease;
}
.switch:after {content: "";position: absolute;top: 3px;left: 5px;width: 22px;height: 22px;border-radius: 50%;background: #fff;transition: transform .25s ease;box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
/* 选中状态：背景变绿，滑块向右移动 */
#toggleSwitch:checked + .switch {background: #4cd964;
}
#toggleSwitch:checked + .switch:after {transform: translateX(26px);
}
进阶技巧与无障碍性
使用 CSS 变量实现颜色切换的灵活性
要点一：通过 CSS 变量，可以让颜色切换逻辑在不同主题或场景下统一管理，减少重复代码。
要点二：将变量与 :checked 状态结合，可以在一个控件状态改变时驱动多处样式的变更，提升可维护性。
:root {--active-color: #e91e63;--inactive-color: #555;
}
#varColor:checked + .varColor-label {color: var(--active-color);
}
.varColor-label {color: var(--inactive-color);transition: color .25s ease;
}
无障碍性与键盘可访问性要点
可访问性要点：确保控件可聚焦并能通过键盘触达，使用合适的 focus 指示，以便屏幕阅读器用户也能察觉状态变化。
实现建议：对可点击元素提供焦点样式、对颜色变化提供文本或图形的替代提示，避免仅靠颜色传达状态信息，并尽量让标签区域成为可点击目标。
.access-label { outline: none; }
.access-label:focus-visible {outline: 2px solid #0b5fff;outline-offset: 4px;
}
#access:checked + .access-label {color: var(--active-color);
}
