:checked + :has()不能直接联动换肤，因为:checked仅作用于checkbox/radio元素本身，而:has()作为父选择器需写在被控元素祖先上且仅支持后代/兄弟匹配，无法反向检测父辈状态；必须将input置于body顶层并用body:has(#id:checked)配合:root变量实现主题切换。
为什么:checked + :has()不能直接联动换肤
因为 :checked 只能作用于 <input type="checkbox"> 或 <input type="radio"> 元素本身，而 :has() 是父选择器，它必须写在「被控制元素」的祖先上，且浏览器目前（Chrome 125+、Safari 16.4+）仅支持 :has() 中的匹配目标是**后代或兄弟**，不能跨 Shadow DOM，也不能反向匹配“父辈是否被选中”。所以你不能写 body:has(input#dark:checked) { --bg: #111; }——这语法合法，但实际无效，因为 body 不是 input 的祖先（它是祖先，但 :has() 在这个位置能生效的前提是：该 input 确实是 body 的后代，且未被 display:none / hidden 隔离）。
真正能用的模式只有一种：把 input 放在要控制的样式容器「外面但同级或上级」，再用 :has() 向下影响子元素。
必须把 checkbox 放在 :root 或 body 开头才能全局生效
想让一次勾选影响整个页面主题，<input id="theme-dark"> 必须位于 最顶层（或 内），且不能包裹在其他块级元素里（避免被 CSS containment 或 overflow:hidden 截断匹配路径）。否则 body:has(#theme-dark:checked) 会失效。
-
<input type="checkbox" id="theme-dark"><main>...</main>✅ 可用 -
<div class="app"><input ...></div>❌body:has(.app #theme-dark:checked)不匹配，因为.app阻断了直接后代关系；改用body:has(#theme-dark:checked)则因#theme-dark不是body直接后代而失败（除非加body > #theme-dark，但语义上不成立） - 移动端 Safari 对
:has()在上的支持不稳定，统一放开头最稳妥
用 :has() 配合自定义属性切换 CSS 变量
不能靠 :has() 直接改 background-color，得靠它触发 :root 或 body 上的变量更新，再由变量驱动全站样式。关键点：变量必须声明在 :root，而 :has() 规则必须写在能覆盖 :root 作用域的位置（即 html:has(...) 或 body:has(...)）。
立即学习“前端免费学习笔记（深入）”；
示例：
/* HTML 结构 */ <body> <input type="checkbox" id="theme-dark"> <main>...</main> </body>
/* CSS */
:root {
--bg: #fff;
--text: #333;
}
<p>body:has(#theme-dark:checked) {
--bg: #111;
--text: #eee;
}</p><p>body {
background-color: var(--bg);
color: var(--text);
}注意：body:has(...) 的优先级高于 :root 声明，但变量值是在计算时动态读取的，所以必须确保 body 上的变量声明能被后代继承（body 默认继承 :root，但显式重写可覆盖）。
radio 换肤组要注意 name 属性和 :has() 匹配逻辑
如果支持「浅色 / 深色 / 系统」三档，用 <input type="radio"> 更合适，但 :has() 无法同时监听多个 ID —— 你得为每种状态写一条规则，且 radio 的 :checked 状态互斥，所以可以这样组织：
- 每个 radio 都有唯一 ID 和相同
name="theme" - 用
body:has(#theme-light:checked)、body:has(#theme-dark:checked)、body:has(#theme-system:checked)分别设置不同变量值 - 务必确保三者规则顺序合理：后声明的会覆盖前声明的（如果它们都匹配），但由于每次只有一个
:checked，实际不会冲突 - 不要试图用
body:has(input[name="theme"]:checked[value="dark"])——:has()不支持属性值匹配中的伪类链式写法，[value="dark"]是属性选择器，但:checked是伪类，组合在:has()里目前无效（Chrome 尚未实现）
所以老实用 ID 区分最可靠。
最易忽略的是：CSS 变量在 :has() 规则里修改后，并不会自动触发动画或 transition，如果需要平滑过渡，得额外给 body 加 transition: background-color 0.3s, color 0.3s，且变量本身得对应可过渡的属性（如 background-color、color），而不是 --bg 这种自定义名。
