Checkbox嵌套于Label内时，如何用纯CSS设置Label文本选中样式？

当然可以实现！不用JavaScript也能搞定这个需求，我给你两种方案，分别适配现代浏览器和需要兼容旧版本的场景：

方案一：利用CSS :has() 选择器（简洁现代版） #

:has() 是CSS新增的“父选择器”能力，专门用来选中包含指定子元素的父元素，完美匹配你的场景——当label内部的input被选中时，直接给label设置粗体样式。

代码示例 #

HTML结构

<label>
  <input type="checkbox">
  我是需要变粗的标签文本
</label>

CSS样式

label {
  padding-left: 35px;
  position: relative;
  cursor: pointer;
  /* 基础样式 */
  font-size: 16px;
}

input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

/* 自定义Checkbox视觉样式（补全你没写完的部分） */
label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}

/* 选中时的Checkbox样式 */
label:has(input:checked)::before {
  background-color: #2196F3;
  border-color: #2196F3;
}

/* 核心：选中时label文本变粗 */
label:has(input:checked) {
  font-weight: bold;
}

注意事项 #

这个方案需要浏览器支持:has()选择器，目前Chrome 105+、Firefox 121+、Safari 15.4+都已经支持，适合现代项目使用。

方案二：兄弟选择器兼容旧浏览器 #

如果需要兼容不支持:has()的旧浏览器（比如Chrome 104及以下、Firefox 120及以下），可以把label的文本单独放在一个<span>里，作为input的相邻兄弟，用CSS兄弟选择器来控制样式。

代码示例 #

HTML结构

<label>
  <input type="checkbox">
  <span class="checkmark"></span>
  <span class="label-text">我是需要变粗的标签文本</span>
</label>

CSS样式

label {
  padding-left: 35px;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
}

input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

/* 自定义Checkbox视觉元素 */
.checkmark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}

/* 选中时的Checkbox样式 */
input:checked ~ .checkmark {
  background-color: #2196F3;
  border-color: #2196F3;
}

/* 核心：选中时文本变粗 */
input:checked ~ .label-text {
  font-weight: bold;
}

这个方案完全依赖传统CSS选择器，兼容性拉满，适合需要支持旧版本浏览器的项目。

内容的提问来源于stack exchange，提问作者user13286