如何用CSS实现勾选复选框时改变父级main类div的背景色

你当前的CSS代码无法实现需求的原因有两个：

1. CSS没有父选择器，没法通过子元素<input>的checked状态直接选中父级.main元素
2. 你用了:checked:after伪元素，这只会给复选框本身添加样式，而非给父级div设置背景色

下面提供两种可行的解决方式：

方式一：纯CSS实现（需微调HTML结构） #

如果允许调整HTML结构，把复选框放到.main外部，利用CSS相邻兄弟选择器来控制div的背景色：

修改后的HTML #

<input type="checkbox" id="maincheck">
<div class="main">{{item.title}}</div>

对应的CSS #

/* 默认未勾选状态的背景色 */
.main {
  background-color: #ffffff;
}

/* 勾选时的背景色 */
#maincheck:checked + .main {
  background-color: #ccc;
}

方式二：Angular绑定实现（无需修改原有结构） #

因为你的项目是Angular，更推荐用框架自带的双向绑定来实现，不需要调整原有HTML结构：

修改后的HTML #

<div class="main" [style.backgroundColor]="isChecked ? '#ccc' : '#fff'">
  <input type="checkbox" id="maincheck" [(ngModel)]="isChecked">
  {{item.title}}
</div>

组件类代码（在对应的.ts文件中添加） #

isChecked = false;

或者用ngClass的方式，便于维护更多样式：

HTML

<div class="main" [ngClass]="{'checked-background': isChecked}">
  <input type="checkbox" id="maincheck" [(ngModel)]="isChecked">
  {{item.title}}
</div>

CSS

.main {
  background-color: #fff;
}
.main.checked-background {
  background-color: #ccc;
}

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