Html 复选框和同级选择器

我使用标签作为复选框的遮罩，当选中相应的复选框时，我需要更改标签的背景。以下是我迄今为止所做的工作：

.viewbutton{
高度：48px；
宽度：48px；
背景色：#FFFFFF；
边界半径：50%；
利润率：0px 4px；
边界：0px；
边框：1px实心#CDCDCD；
光标：指针；
背景重复：无重复；
背景位置：中心；
背景尺寸：24px；
位置：相对位置；
显示：内联块；
}
#comparechk：选中+#comparebtn，
#editchk:选中+#editbtn，
#multiplechk：选中+#multiplebtn{
背景色：#005EFF；
大纲：无；
}

+

是相邻的兄弟组合词，因此

A+B

表示直接跟随

A

的

B

元素，中间没有其他元素

您需要常规同级组合符，

~

    #comparechk:checked ~ #comparebtn,
    #editchk:checked ~ #editbtn,
    #multiplechk:checked ~ #multiplebtn {
        background-color: #005EFF;
        outline: none;
    }

+

是相邻的同级组合词，因此

A+B

表示直接跟随

A

的

B

元素，中间没有其他元素

您需要常规同级组合符，

~

    #comparechk:checked ~ #comparebtn,
    #editchk:checked ~ #editbtn,
    #multiplechk:checked ~ #multiplebtn {
        background-color: #005EFF;
        outline: none;
    }