如何仅用CSS/SASS实现复选框切换时Label内容变更（无需JS）

架构老林

2026-8-10

纯CSS/SASS实现方案

当然可以用纯CSS/SASS实现，核心就是利用复选框的状态伪类结合兄弟选择器或:has()选择器，通过伪元素的content属性切换内容，以下是适配你场景的具体方案：

方案1：基于现有结构优化（兼容性好）

你当前的代码思路本身就是可行的纯CSS方案，只需确保：

已正确定义自定义属性，比如：

:root {
  --theme-moon: "🌙";
  --theme-sun: "☀️";
}

浏览器支持CSS变量和兄弟选择器（现代浏览器均支持）

如果想直接切换label的文本而非.sun的内容，可以简化代码：

input#theme-switch[type=checkbox] {
    display: none;
}

// 未勾选状态：label显示对应内容
input#theme-switch:not(:checked) ~ label[for=theme-switch]::before {
    content: "切换到深色主题";
}

// 勾选状态：label显示对应内容
input#theme-switch:checked ~ label[for=theme-switch]::before {
    content: "切换到浅色主题";
}

对应的label可以简化为：

<label for="theme-switch"></label>

方案2：使用`:has()`选择器（更灵活）

如果label嵌套在其他容器中，无法通过兄弟选择器关联，可以利用CSS的:has()选择器（现代浏览器已支持），完美适配你的主题控制场景：

input#theme-switch[type=checkbox] {
    display: none;
}

// 复选框未勾选时，所有关联label显示月亮图标/文本
body:has(input#theme-switch:not(:checked)) label[for=theme-switch]::before {
    content: var(--theme-moon);
}

// 复选框勾选时，所有关联label显示太阳图标/文本
body:has(input#theme-switch:checked) label[for=theme-switch]::before {
    content: var(--theme-sun);
}

这个方案的优势是label可以放在页面任意位置，不需要和checkbox保持兄弟节点关系，和你现有的主题控制逻辑完全兼容。