更改已使用css检查输入子级的span的css样式

更改已使用css检查输入子级的span的css样式,css,Css,我想改变跨度背景图像时,它的子输入是检查,有没有办法做到这一点使用CSS <span style='background-image:'url(bla bla)''><input id='child'/>span to be changed</span> 要更改的范围 当前无法在CSS中选择元素的父元素。 无论如何,您可以使用:has()伪类,即。 使用:has()时,您的代码将如下所示: span:has(> #child.checked) { /*

我想改变跨度背景图像时,它的子输入是检查,有没有办法做到这一点使用CSS

<span style='background-image:'url(bla bla)''><input id='child'/>span to be changed</span>
要更改的范围

当前无法在CSS中选择元素的父元素。
无论如何,您可以使用
:has()
伪类,即。
使用
:has()
时,您的代码将如下所示:

span:has(> #child.checked) { /* styles */ }



但是最好的方法是使用JavaScript。这里有一个技巧可以在没有
的情况下实现目标:has

span{
显示:内联块;
宽度:200px;
高度:50px;
边框:1px纯红;
背景色:透明;
位置:相对位置;
}
#孩子:以前{
内容:'';
位置:绝对位置;
宽度:100%;
身高:100%;
排名:0;
左:0;
}
#孩子:选中:之前{
背景:红色;
z指数:-1;
}

span待更改
这是否回答了您的问题?不,不是“给我答案”,而是建议使用任何浏览器都不支持的(:has)。当问题标记为重复时,StackOverflow会自动生成注释。我不是说有答案,我把这个问题标记为一个重复的问题,这个问题已经被问了很多次了。答案是目前没有。您需要使用Javascript以干净的方式实现这一点。好的,但并非所有浏览器都支持它。'_(ツ)_/''您必须使用JavaScriptSaude,但css中没有其他方法。.您的代码在Firefox中无法工作,这是可以克服的