如何使用CSS为复选框选择标签？

我正在服务器端编写一个stringbuilder（HTML代码），并通过ajax向jquery函数发送一个响应，该函数将HTML放置到位。在服务器端，决定选中哪个复选框。到目前为止还不错

我想为选中的复选框选择标签并更改颜色，以便选中的国家/地区的颜色不同。我的问题是，我无法选择所需的标签和更改颜色属性。我尝试了你所看到的，当然使用类和

+

和

和

:before

和其他奇怪的东西

那么，如何选择它们并更改标签上的任何属性呢

我想用CSS来做，我知道如何用jquery来做，但这似乎是错误的

label+input.chkCountry[type=“checkbox”]：选中{color:green；}

阿富汗
阿尔巴尼亚
阿尔及利亚
美属萨摩亚

您只需更改HTML和选择器。在CSS中，标签不知道是否选中了复选框，因此必须将其转过来。在HTML中，

输入

不应位于

标签

元素中

input.chkCountry[type=“checkbox”]：选中+标签{color:green；}
/*输入：选中+标签{颜色：绿色；}/*短选择器*/

阿富汗


阿尔巴尼亚


阿尔及利亚


美属萨摩亚

遵循下面的代码示例

input[type=“checkbox”]：选中~label{
颜色：绿色；
}

阿富汗


阿尔巴尼亚

尝试以下方法：

.chkCountry:选中+.lblCountry{
颜色：绿色；
}

阿富汗


阿尔巴尼亚

阿尔及利亚

A美属萨摩亚

如果其他人想知道顺序是否重要，那就不重要了：CSS选择器的顺序应该已经指定，HTML标签的顺序-input；）我只是想警告一下上面的信息，“在HTML中，输入不应该在label元素中”-这不是真的-label中输入的巨大优势之一，这是提高可用性-单击文本本身就像单击复选框/收音机一样。这也可以通过使用带有“for”属性的标签来实现，但是如果自动生成一些巨大的列表等（总是可以做到，但需要额外的代码），那么标签并不总是那么容易使用。关闭标签中的输入可以解决所有问题。但是，是的，反过来说，选择这样的标签父项会产生问题。