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

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 应该可以工作。我也不确定你的第二条规则究竟应该做什么，但它仍然行不通，因为一般的兄弟选择器 ~ 不会查看之前的兄弟。