Question

我遇到了这个令人烦恼的问题，我似乎无法解决这个问题：HTML代码看起来像这样

<form>
<lable><img src="/image.png"/></lable>
<input type="text" name="name" required/>
</form>

当我关注img时，我会尝试将过滤器应用于标签input。我试过两个：

input:focus ~ lable>img{filter...}
input:focus + lable>img{filter...}
input:focus lable>img{filter...}
input:focus img{filter...}

但似乎没有任何影响。是我的本地主人做伎俩还是我必须尝试完全不同的东西？如果那么呢？期待收到你们巫师的来信。

Answer 1

选择器 + 和〜都适用于下一个元素，因此您必须将input带到label之前。如果您希望您的标签位于输入的左侧，请将它们放在从右到左的div中，或者将左侧的float设置为标签：

<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>

CSS影响兄弟姐妹img

1 个答案: