一旦輸入被選中，改變分隔符的背景

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應該可以工作。我不確定你的第二條規則究竟應該做什麼，但它仍然行不通，因爲一般的兄弟選擇器~不看以前的兄弟姐妹。