复选框选中时仅为指定for属性标签设置背景色的CSS问题

你的代码没生效主要有两个原因：

1. CSS兄弟选择器的限制：~选择器只能选中当前元素之后的同级元素，但你把label放在了input前面，所以选择器找不到目标标签。
2. label与input的关联错误：label的for属性值必须和对应input的id完全匹配，你当前label的for是Sign_me_up_for_the_newsletter_and_periodic_alerts，而input的id是newsletter_optin，两者不匹配，不仅样式选不到，标签和复选框的关联也失效了。

修正后的代码 #

CSS

/* 精准选中 newsletter 复选框对应的标签 */
input[type="checkbox"].newsletter_optin:checked ~ label[for="newsletter_optin"] {
  background: green;
}

/* 如果需要给同意条款的标签设置样式，可以用类似写法 */
input[type="checkbox"].accept_tos:checked ~ label[for="terms_of_agreement"] {
  background: #ffdddd;
}

HTML

<div class="pull-right">
  <!-- 将input移到对应label前面，同时修正for和id的匹配 -->
  <input type="checkbox" name="newsletter_optin" id="newsletter_optin" value="yes" class="newsletter_optin">
  <label for="newsletter_optin">Sign me up for the newsletter and periodic alerts</label>
  <br>
  <input type="checkbox" name="terms_of_agreement" id="terms_of_agreement" value="yes" class="accept_tos">
  <label class="text-danger" for="terms_of_agreement">I agree to the terms of agreement</label>
</div>

补充说明 #

• 尽量不要用!important，除非有其他优先级更高的样式强制覆盖当前规则，否则会增加样式维护的复杂度。
• 如果无法调整HTML结构（比如受限于现有代码框架），可以用JavaScript实现：监听复选框的change事件，切换对应label的类名来设置背景色。

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