探讨checked表单属性配合原生CSS变量实现换肤功能的原理

:checked能触发换肤因其是浏览器原生状态的实时镜像，响应用户对radio的真实交互后立即重绘；通过:checked ~ [data-theme]等选择器联动覆盖:root变量，依赖CSS层叠优先级而非JS操作。

:checked 为什么能触发换肤，而不是靠 JS 监听？

因为 :checked 是浏览器原生状态的实时镜像，不是 JS 控制的开关。它只响应用户对 <input type="radio"> 的真实交互（点击、空格键、回车），状态更新后立即触发 CSS 重绘——只要样式规则里用了 :checked + :root 或 :checked ~ [data-theme] 这类链路，变量覆盖就同步发生。

常见错误是试图给 <option> 或 <button> 加 :checked，它只对 radio 和 checkbox 生效；更隐蔽的坑是 radio 没设 name 属性，导致无法互斥，多个主题同时激活。

• 必须用 <input type="radio">，不能用 checkbox —— 换肤是单选行为，checkbox:checked 不会自动取消前项
• name 属性值要一致，比如 name="theme"，否则浏览器不认为它们属于同一组
• radio 必须在 DOM 中真实存在且可交互，不能用 display: none 隐藏，推荐 position: absolute; left: -999px;
• 样式规则中 :checked 必须紧邻或能通过 ~ 找到目标节点，例如 input#dark:checked ~ :root 要求 :root 是它的后续兄弟元素（实际中通常用 body 或包装容器代替）

如何让 :checked 修改 :root 变量而不依赖 JS？

纯 CSS 做不到直接写 document.documentElement.style.setProperty()，但可以通过属性选择器间接覆盖：把不同主题的变量写成独立的 [data-theme="dark"] :root 规则块，再用 :checked 控制 body 或根容器的 data-theme 属性值。

关键不是“JS 改变量”，而是“JS 切 class 或 data 属性”，:checked 只负责联动这个动作。真正生效的是 CSS 层叠优先级——[data-theme="dark"] :root 比普通 :root 优先级高，变量自然被覆盖。

立即学习“前端免费学习笔记（深入）”；

• 不要在 :root 里写多套变量，CSS 不支持条件分支，会全部生效导致冲突
• 主题样式必须写在默认 :root 规则之后，否则层叠失败，变量不会被替换
• 推荐结构：<input id="theme-dark" type="radio" name="theme"> + <label for="theme-dark">深色</label> + <div class="theme-applier"></div>，然后用 input#theme-dark:checked ~ .theme-applier 设置 data-theme="dark"
• 如果用 body[data-theme]，确保所有 var(--color-bg) 引用都在其子元素内，否则继承链断开

为什么 var(--xxx) 能自动响应 :checked 触发的变量变更？

因为 CSS 变量是级联作用域内的动态值，浏览器渲染引擎会在每次样式计算时重新读取 :root 上的当前值。只要变量定义位置没变（始终在 :root 或更高层选择器下），且引用方式统一为 var(--xxx)，就不需要 JS 强制重绘或遍历元素。

容易忽略的硬伤是混用硬编码值：比如某处写了 color: #333，另一处用了 color: var(--text-color)，换肤时前者完全不动，视觉就错乱了。

• 所有颜色、间距、阴影、字体大小等可变样式，必须 100% 通过 var(--xxx) 引用，不能有例外
• 每个 var() 最好带 fallback，比如 color: var(--text-color, #000);，避免变量未定义时样式崩塌
• Shadow DOM 内部需显式透传变量，:host { --color-primary: var(--color-primary); }，否则子组件拿不到
• 变量名拼写必须严格一致，--primary-color 和 --primaryColor 是两个变量

移动端和无障碍场景下 :checked 换肤要注意什么？

移动端点击区域小、焦点管理弱，:checked 容易失效；屏幕阅读器依赖语义结构，隐藏 radio 时若处理不当，会导致换肤控件不可访问。

真实项目里最常踩的坑不是逻辑写错，而是 label 关联失效或 focus 样式缺失——用户点了却没反应，或者键盘 Tab 进不去。

• <label> 必须用 for 显式绑定 radio 的 id，不能仅靠包裹结构，否则 Safari 移动端可能不识别
• 给 label 加 padding 或 min-height 扩大点击区域，至少 44×44px 符合 WCAG
• 保留 :focus-visible 样式，让用户知道当前焦点在哪，别用 outline: none 一刀切
• 不要用 pointer-events: none 或 user-select: none 拦截 radio 父容器，会阻断原生状态更新

复杂点在于，:checked 是被动响应机制，它不保证“用户一定看到变化”——如果变量引用漏了、fallback 写错、或 DOM 结构导致选择器断链，整个换肤链就静默失败，连报错都没有。