:checked能触发换肤因其是浏览器原生状态的实时镜像，响应用户对radio的真实交互后立即重绘；通过:checked ~ [data-theme]等选择器联动覆盖:root变量，依赖css层叠优先级而非js操作。
:checked 为什么能触发换肤，而不是靠 JS 监听？
因为 :checked 是浏览器原生状态的实时镜像，不是 JS 控制的开关。它只响应用户对 <input type="radio"> 的真实交互（点击、空格键、回车），状态更新后立即触发 CSS 重绘——只要样式规则里用了 :checked + :root 或 :checked ~ [data-theme] 这类链路，变量覆盖就同步发生。
常见错误是试图给 <option></option> 或 <button></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></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 结构导致选择器断链，整个换肤链就静默失败，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
