:has() 配合 :checked 可实现纯 css 主题切换，但需用带 id 的隐藏 checkbox（如 #theme-toggle）置于 body 顶层，通过 body:has(#theme-toggle:checked) 控制变量，firefox 因不支持 :has() 而无效果，须 js 降级。
:has() 配合 :checked 能实现纯 CSS 主题切换，但必须用 input[type="checkbox"] 作为状态开关，且不能依赖 Firefox —— 它至今不支持 :has()。
为什么不能直接用 :checked 控制 body 类名切换？
CSS 无法修改 HTML 属性或类名，:checked 只能影响自身及其后续兄弟/后代元素，它本身不具备“提升作用域”能力。你想让整个页面响应主题变化，就必须借助 :has() 让顶层容器（如 body）“感知”某个 checkbox 的状态。
-
:checked自身只能做局部控制：比如input:checked ~ .theme-icon切换图标，但影响不了.header或.sidebar - 想跨区域响应，必须把状态“上抛”——
body:has(#theme-toggle:checked)是唯一可行路径 - 别写
body:has(input:checked)，太宽泛；要绑定具体 ID，如#theme-toggle，避免误触发
HTML 结构必须满足的三个硬条件
结构错一点，整个逻辑就失效。核心是：状态源必须可被 :has() 稳定捕获，且不影响文档流。
-
<input>必须在 DOM 中真实存在，不能display: none或visibility: hidden（部分 Safari 版本对不可见 input 的:checked检测不稳定） - 推荐用
position: absolute; opacity: 0; pointer-events: none;隐藏，既保留语义和状态可读性，又不影响布局 -
<input id="theme-toggle">最好放在顶层，不要嵌套在<header></header>或<nav></nav>内——否则body:has(#theme-toggle:checked)仍有效，但若放太深，可能被其他样式干扰 - label 必须用
for="theme-toggle"显式关联，点击区域才真正可控
主题样式规则怎么写才可靠？
别堆砌多层嵌套选择器，用 :has() 锁定作用域后，直接作用于目标组件。
- 基础模式：
body:has(#theme-toggle:checked) .app { --bg: #1a1a1a; --text: #e0e0e0; }，再通过var(--bg)下发到各组件 - 避免写
body:has(#theme-toggle:checked) header nav a这种长链——维护成本高，且一旦 DOM 微调就断 - 深色模式下需重置表单控件默认样式，例如：
body:has(#theme-toggle:checked) input, body:has(#theme-toggle:checked) select { background: #2d2d2d; color: #fff; } - 动画过渡要加在变量引用处，不是
:has()规则里：.app { background-color: var(--bg); transition: background-color 0.2s ease; }
Firefox 用户会看到什么？
他们根本看不到主题切换效果——因为 :has() 在 Firefox 中仍为 disabled 状态（截至 2026 年 9 月）。这不是 bug，是明确未实现。
- 如果你的项目必须兼容 Firefox，
:has()+:checked方案只能作为渐进增强，主逻辑还得靠 JS 切换data-theme - 检测方式很简单：
@supports not selector(:has(*)) { /* fallback styles or JS hook */ } - 别指望用
:has()做兜底，它在不支持的浏览器里整条规则都会被忽略
真正容易被忽略的是：主题切换不是“开了就完事”，而是状态持久化问题。CSS 无法读写 localStorage，所以 checkbox 的初始 checked 状态必须由 JS 根据本地存储设置，否则刷新后总回退到默认值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
