一旦输入被选中，改变分隔符的背景

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

这不是有效的HTML有div在p浏览器将带您的标记，并把它作为这样的：

p 
    label 
    input 
div 

这意味着你的div居然来了p之后，而不是在它里面。所以，当你想选择一个input之后，是div，它不会工作，因为div没有在那个位置存在。

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