如何使用CSS选择器选中复选框与标签之间的额外内容？

嘿，我明白你的需求啦——你想选中<label>里复选框后面的那部分文本内容（比如"Movies"、"Music"这些）对吧？刚好我有几个实用的方案，咱们一步步看：

方案1：利用父元素+子元素样式反转（无需改HTML） #

CSS没法直接选中文本节点，但我们可以耍点小技巧：先给整个<label>设置样式，再把复选框的样式重置回去，这样就只有后面的文本会应用我们想要的样式啦。举个例子，要是想给文本改颜色：

.justlabel {
  color: #ff4444; /* 先给整个label文本设成红色 */
}
.justlabel input {
  color: initial; /* 把复选框的颜色恢复成默认，这样只有后面的文本是红色 */
}

方案2：用:has()选择器精准定位（现代浏览器可用） #

如果你的项目不需要兼容老浏览器（Chrome 105+、Firefox 121+都支持），可以用:has()这个强大的选择器来定位包含复选框的标签，再配合样式反转：

/* 给包含复选框的label里的文本加粗 */
label.justlabel:has(input[type="checkbox"]) {
  font-weight: 700;
}
/* 要是只想让复选框后面的文本变色，还是结合方案1的思路 */
label.justlabel:has(input[type="checkbox"]) {
  color: #3366cc;
}
label.justlabel:has(input[type="checkbox"]) input {
  color: inherit; /* 让复选框颜色和父元素一致，不抢戏 */
}

方案3：修改HTML结构（最省心的最优解） #

要是你能调整一下HTML，把文本放进一个<span>标签里，那后续的CSS操作就超简单了：

<label class="justlabel">
  <input type="checkbox" value="movie"> 
  <span class="label-content">Movies</span>
</label>

然后直接用选择器选中这个span就行：

.justlabel .label-content {
  text-decoration: underline;
  font-style: italic;
  /* 想加啥样式都可以直接写 */
}

小提醒哦 #

CSS本身是没法直接选中文本节点的（就是复选框和文本之间的空格、文本本身这些不是HTML元素的内容），所以上面的方案都是通过控制父元素或者调整结构来间接实现的。如果你的需求是要获取这段文本的内容（比如用JS操作），那CSS就帮不上忙啦，得用JavaScript来处理~

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