Html 使用CSS设置复选框的样式

我试图在表单上设置自定义复选框的样式；我的HTML如下所示：

<form id="contact">
  <input type="checkbox" id="option1" />
  <label for="option1">Option</label>
</form>

form input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
}
form label {
  padding-left: 20px;
  position: relative;
}
form label:before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: -10px;
  border: 1px solid #000;
}

我想在勾选复选框时添加背景色，因此我添加了以下规则：

input[type="checkbox"]:checked + label:before {
  background-color: #ccc;
}

这就像我想要的一样，但我只需要为规则指定一个联系人表单，所以我将其更改为：

#contact input[type="checkbox"]:checked + #contact label:before {
  background-color: #ccc;
}

这次不行了。勾选复选框时背景不会改变

---

我的问题是CSS有什么问题？我错过了什么？

你离我很近。选择器应为：

#contact input[type="checkbox"]:checked + label:before {
  background-color: #ccc;
}

它不起作用的原因是contact不是input[type=checkbox]元素的相邻同级。您需要省略第二个联系人id选择器

换句话说，选择器：

input[type="checkbox"]:checked + #contact label {}

将尝试选择以下标签元素：

由于输入复选框元素没有相邻的联系人元素，因此未选择任何内容。

表单输入[类型=复选框]{ 位置：绝对位置； 左：0； 顶部：0；不透明度：0；} 表格标签{ 左侧填充：30px； 位置：相对；} 表格标签：在{ 内容：； 宽度：20px； 高度：20px； 位置：绝对位置； 左：0； 排名：0； 边框：1px实心000；} 联系人输入[类型=复选框]：选中+标签：在{背景颜色：ccc；}之前 选项

---

谢谢你的快速回复，伙计！它工作得很好。这与我3小时前发布的内容有何不同？你在这里做错了，你已经指定了正确的选择器，因此删除beore+标签选择器或可能的重复项

<input type="checkbox" id="option1" />
<div id="#contact">
   <label for="option1">Option</label>
</div>