<分区>
<分区>
我遇到了这个我似乎无法解决的恼人问题:HTML 代码如下所示
<form>
<lable><img src="/image.png"/></lable>
<input type="text" name="name" required/>
</form>
当焦点在 input 上时，我试图对标签的 img 应用过滤器。我已经尝试过:
input:focus ~ lable>img{filter...}
input:focus + lable>img{filter...}
input:focus lable>img{filter...}
input:focus img{filter...}
但似乎没有任何效果。是我的本地主机在耍花招还是我必须尝试一些完全不同的东西？如果那又怎样？期待收到各位巫师的来信。
最佳答案
选择器 + 和 ~ 都为下一个元素工作，所以你必须把 input 放在 标签。如果您希望您的标签位于输入的左侧，请将它们放在从右到左的 div 中或为标签设置 float left:
<form>
<div style="direction: rtl;">
<input type="text" name="name" required/>
<lable><img src="/image.png"/></lable>
</div>
</form>
或者
<form>
<input type="text" name="name" required/>
<lable style="float:left;"><img src="/image.png"/></lable>
</form>
关于html - 影响 sibling img 的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43021764/