使用CSS更改检查按钮标签

Question

当我检查按钮时，我希望改变按钮标签的颜色和背景，但它不起作用。这是一个可折叠按钮。

.accordion>input[name="collapse"] {
display: none;
/*position: absolute;
left: -100vw;*/
}
.accordion label,
.accordion .content {
margin-left: 0;
}
.accordion label {
display: block;
border-bottom: solid 1px #ffffff55;
width: 76%;
margin-left: 12%;
text-indent: 10px;
font-size: 15px;
font-weight: 400;
font-family: Open Sans;
margin-top: 7px;
padding-top: 13px;
padding-bottom: 7px;
}
.accordion .content {
overflow: hidden;
height: 0;
transition: 0.5s;
}
.accordion>input[name="collapse"]:checked~.content {
height: 0px;
transition: height 0.5s;
}

/* For Desktop */
@media only screen and (min-width: 620px) {
.accordion .handle {
margin: 0;
font-size: 16px;
}
.accordion label {
color: #fff;
cursor: pointer;
font-weight: normal;
user-select: none;
}
.accordion label:hover,
.accordion label:focus {
background: rgba(255, 255, 255, 0.2);
border: rgba(255, 255, 255, 0.2);
border-radius: 5px;
}
.accordion .handle label:after {
font-family: FontAwesome;
content: "f107";
display: inline-block;
margin-left: 10px;
font-size: 1em;
line-height: 1.556em;
vertical-align: middle;
transition: 0.4s;
}
.accordion>input[name="collapse"]:checked~.content {
height: 70px;
margin-left: 12%;
border-top: 0;
transition: 0.3s;
}
.accordion {
margin-bottom: 0;
}
.accordion>input[name="collapse"]:checked~.handle label:after {
transform: rotate(180deg);
transform-origin: center;
transition: 0.4s;
}
.accordion>input[name="collapse"]:checked~.accordion label {
color: #000;
background: #ffffff;
}
}

<div class="accordion">
<input type="checkbox" name="collapse" id="handle4">
<h2 class="handle ">
<label for="handle4" style="">Change Language</label>
</h2>
<div class="content">
<p>Some contents</p>
</div>
</div>

最后一个CSS指令是我试图用它来改变标签的颜色和背景"更改语言"，但它不起作用。请帮助!

Answer 1

你的兄弟元素应该是.handle label而不是.accordion label

Answer 2

您需要将指令更改为

.accordion>input[name="collapse"]:checked ~ .handle label {
color: #000;
background: #ffffff;
}

不能工作，因为没有。accordion

的直接兄弟。