Jquery 如何设置嵌套在标签标记中的复选框的样式

设置复选框时，我通常使用以下选项：

<input ....>
<label for="...">Lorem ipsum</label>

但是，Wordpress插件迫使我使用以下语法：

<label>....
    <input....>
</label>

。。。。

由于CSS无法遍历DOM，因此我通常使用的纯CSS方法在这里不起作用

---

还有其他建议吗？也许是jQuery？还是我缺少一个纯粹的CSS解决方案？

是的，你需要使用JS。CSS无法处理家长。请查看以下jQuery代码：

$（文档）。在（'click'，'input[type=“checkbox”]”上，函数（）{
如果（！$（this）.is（':checked'））{
$（this.parent（）.removeClass（'checked'）；
}否则{
$（this.parent（）.addClass（'checked'）；
}
});
好吧，你不能用CSS来做，因为它不能遍历DOM（正如你自己提到的）。

不幸的是，
label:checked
也不起作用

因此，您正在寻找JS/jQuery解决方案：


$（函数（）{
$（':checkbox'）。在（'change'，function（）上{
$（this）.closest（'label'）.toggleClass（'active'，$（this）.is（'：checked'））；
});
});
标签{
边框：2倍纯红；
}
.主动{
边框颜色：蓝色；
}

您需要使用JS来表示HTML结构，因为CSS无法进入DOM。仅水平或向下。如果根据复选框的选中状态实际演示了可见的更改，则此答案会更好。
<label>....
    <input....>
</label>