选择输入后，更改分隔符的背景

Question

在这里有一个金发时刻，一旦输入有焦点，尝试使用CSS告诉分隔符改变其背景。

<p>
    <label>Your Name</label>
    <input type="text" name="your_name" id="your_name" value="" />
    <div class="formhelper">Please enter your full name,<br />Character limit of 255</div>
</p>

这就是HTML代码，现在我尝试了以下但无法使其正常工作

.appformwrapper input:focus + div {
    background-color: #CCC !important;
    display: block;
} 
.appformwrapper div ~ input:focus {
    background-color: #CCC !important;
}
.appformwrapper input:focus {
    background-color: #EEF;
} 

有什么想法吗？我之前在CSS中做过一次，但是找不到我爆炸的代码:(

Answer 1

在div中拥有p是无效的HTML。浏览器将采用您的标记并将其视为：

p
  label
  input
div

这意味着您的div实际上是在p之后，而不是在其中。因此，当您尝试选择div之后的input时，它将无效，因为div在该位置不存在。

如果您可以将p更改为另一个div，或将现有div更改为span，那么您的CSS应该可以使用。我不确定你的第二条规则究竟应该做什么，但它仍然无效，因为一般的兄弟选择器~不会看到以前的兄弟姐妹。