不能用 :has + :checked 实现可靠的暗黑模式切换，因其无法选中无父级的 :root 节点来更新 css 自定义属性，且 safari 支持有限、不响应状态变化，仅适用于局部样式微调。
不能用 :has + :checked 实现可靠的暗黑模式切换。 这个组合看似能绕过 JS，实际在语义、作用域和浏览器支持上存在硬伤，不推荐用于生产环境。
为什么 :has + :checked 无法驱动暗黑模式
核心问题在于：CSS 自定义属性（--color-bg 等）的生效依赖于 :root 节点上的声明，而 :has(input:checked) 只能匹配祖先元素，无法选中 根节点本身—— 没有父级，:has 在它身上永远不匹配。
常见错误写法：
:has(#theme-toggle:checked) :root {
--bg-color: #121212;
}
这段 CSS 不会生效，因为 #theme-toggle 不可能成为 的后代（除非你把 <input> 塞进 标签里，这本身是非法 HTML）。
-
:has是选择器，不是状态监听器；它只在样式计算时快照 DOM，不响应后续变化 - 即使你把它写在
body上，:root也不会被重定义——变量仍维持初始值 - Safari 15.4+ 才支持
:has，且不支持在@media或:root外层使用它来覆盖变量
:has 在暗黑模式里唯一可用的场景
它只能用于局部样式微调，比如控制某个开关组件自身的视觉反馈，或切换相邻元素的图标，但绝不能用来“设主题”。
例如，让一个跟随 checkbox 状态变色的标签：
label:has(input[type="checkbox"]:checked) .icon-sun {
display: none;
}
label:has(input[type="checkbox"]:checked) .icon-moon {
display: inline;
}
- 这种用法安全，因为作用域局限在 label 内部，不涉及变量重定义
- 它不改变
--bg-color，只是显示/隐藏已有图标 - 仍需配合 JS 或
data-theme才能真正切换页面主题
真正起效的切换路径只有两条
一条靠系统偏好自动响应，一条靠用户手动干预，两者必须共存且不冲突：
- 自动兜底：
@media (prefers-color-scheme: dark) { :root { --bg-color: #121212; } }—— 必须写在:root默认声明之后，且独立成块 - 手动覆盖：
html[data-theme="dark"] { --bg-color: #121212; }—— 同时要document.documentElement.setAttribute('data-theme', 'dark')和localStorage.setItem('theme', 'dark') - 漏掉
html { color-scheme: light dark; }，<input>、滚动条等原生控件颜色不会变
想用纯 CSS 切换？目前只有 @media (prefers-color-scheme: dark) 可靠。想让用户点一下就变？JS 是绕不开的一环。把希望寄托在 :has 上，最后只会卡在 Safari 兼容性、变量未更新、或刷新后状态丢失这些地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
