将CSS选择器与嵌套复选框组合时出现问题

Question

CSS与旧HTML配合得很好，但我不得不更改为新HTML(嵌套复选框(。我不知道如何更改我的CSS来实现这一点。

/*Old CSS:*/
.cl1 .clChk:checked ~ .cl2 {
opacity: 1;
height: auto;
}

<!--OLD HTML-->
<div class="cl1">
<label class="clLabel" for="chk_1">some text</label>
<input class="clChk" type="checkbox" id="chk_1">

<article class="cl2">
..some text..
</article>
</div>
<!--NEW HTML-->
<div class="cl1">
<label class="clLabel"><input class="clChk" type="checkbox">Some text</label>

<article class="cl2">
..some text..
</article>
</div

我尝试了很多变体，但似乎无法使其发挥作用；因此，如果复选框没有嵌套在标签中，则没有问题，但我需要将复选框嵌套在中。

非常感谢你的帮助！

Answer 1

dedijk！您错过了cl1Chk元素开头的点。

.cl1 clChk：已检查{}

至

.cl1.clChk：已检查