如何用CSS伪类:checked实现纯CSS暗黑模式切换-css教程-PHP中文网

:checked无法直接控制暗黑模式，因其仅能影响同级后续元素；纯css实现需将checkbox置于body开头并用~选择器切换body上的css变量，再由组件引用变量，但持久化、初始化和系统偏好同步仍需少量js配合。

如何用css伪类:checked实现纯css暗黑模式切换

为什么:checked不能直接控制暗黑模式主题

:checked 只能作用于 <input type="checkbox"> 或 <input type="radio"> 元素自身及其后续兄弟元素（通过 ~ 或 +），它无法跨层级影响或的 class，更不能直接修改根级 CSS 变量。所以“纯 CSS 实现暗黑模式切换”必须依赖一个前提：把开关控件放在 DOM 顶层，并用兄弟选择器辐射全局样式。

必须把 `<input>` 放在或同级且靠前的位置

浏览器解析 CSS 时，~ 选择器只能选中**当前元素之后的同级元素**。因此，要让 :checked 影响整个页面，<input id="theme-toggle"> 必须放在开始处（或内最顶部），并且所有需要响应的主题样式都得写成它的后续兄弟选择器形式。

常见错误是把 checkbox 塞进 header 或 aside 里——那样它根本选不到 <main></main> 或 <footer></footer>。

✅ 正确位置：

  <input type="checkbox" id="theme-toggle">...

❌ 错误位置：

  <header><input type="checkbox" id="theme-toggle"><!-- 这里失效 --></header><main></main>

实际项目中常改用作为容器，把 <input> 放在开头，再用 body > * 或 body > :not(input) 配合 #theme-toggle:checked ~ * 控制后代

用 `:checked ~ *` + `CSS 变量` 统一接管颜色体系

不能靠 :checked ~ h1 { color: #333; } 逐个写死所有元素，否则维护爆炸。正确做法是定义两套 CSS 变量，在 :checked 触发时批量切换根变量值，再让所有组件用 var(--text-primary) 等引用。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

关键点在于：变量必须定义在 :root 或 body 上，且被 :checked 选择器覆盖；而 :root 不支持被 ~ 选中，所以变量得挂到上。

把 <input id="theme-toggle"> 放在最开头
用 #theme-toggle:checked ~ * { } 无效（* 匹配太泛，性能差且不可控）；应改用 #theme-toggle:checked ~ body { --bg: #121212; --text: #e0e0e0; }

所有真实内容包裹在 <div id="app"> 或类似容器内，样式统一基于 <code>body 上的变量：

body {
  --bg: #ffffff;
  --text: #333333;
}
#theme-toggle:checked ~ body {
  --bg: #121212;
  --text: #e0e0e0;
}
#app {
  background-color: var(--bg);
  color: var(--text);
}

注意：Safari 对 :checked ~ body 支持良好，但部分旧版 Chrome 要求 body 必须是 <input> 的**直接后续兄弟**，不能中间隔注释或空格文本节点

用户交互与可访问性绕不开的三个坑

纯 CSS 方案看似简洁，但忽略这些会立刻翻车：

<input> 必须有 id，且关联的 <label></label> 要用 for 属性绑定，否则屏幕阅读器无法识别用途 —— 别用 <div onclick> 模拟<li>切换后页面不会“记住状态”，刷新即回默认。CSS 本身无存储能力，必须配合 <code>localStorage + 少量 JS 设置初始 checked 状态，否则体验断裂
系统偏好（@media (prefers-color-scheme: dark)）和用户手动切换冲突。建议用 JS 读取 matchMedia 结果，仅在用户未手动操作时才按系统设置 checked，否则 CSS 无法判断“谁优先”
深色模式图标（如太阳/月亮）需用 #theme-toggle:not(:checked) + label::before 和 #theme-toggle:checked + label::before 分别定义，避免用 JS 切换 class