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

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

在p 中包含div 是无效的HTML。浏览器将获取您的标记并将其视为：

p
  label
  input
div

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

如果您可以将您的p 更改为另一个div，或将您现有的div 更改为span，您的CSS 应该可以工作。我也不确定你的第二条规则到底应该做什么，但它仍然不起作用，因为通用兄弟选择器 ~ 不会查看以前的兄弟。