背景色を変更するためにdivをクラスに追加するにはどうすればよいですか？

Question

したがって、私は、緑色の背景を持つ簡単なログインページを持っていて、 'loginbox' div with id = 'loginbox'にもクラス 'error'がある場合、背景色を明るい赤色に変更したいと思います。次のように私のページが見えます：

VALID HTML http://i1154.photobucket.com/albums/p525/covertcj/ScreenShot2012-01-16at20759PM.png

のrelavent HTMLは次のように見ていると：（エラークラスを追加する前に）

HTML：下記のCSSで

<div id="loginbox"> 
    <span>Username:</span> 
    <input> 

    <span>Password:</span> 
    <input> 

    <button>Submit</button> 
</div> 

、私がいることを感じてこれはうまくいくはずです。ただし、エラークラスをdivに追加すると何も起こりません。

CSS：

#loginbox { 
    margin: auto; 
    padding: 25px 50px; 
    width: 300px; 
    height: 100px; 
    border: 1px solid #e9e9e9; 
    background: #EBFFEF; 
} 
#loginbox .error { 
    background: #FFEBEB; 
} 
#loginbox input { 
    height: 15px; 
    margin: 3px 0px; 
    width: 190px; 
    float: right; 
} 
#loginbox span { 
    height: 15px; 
    width: 60px; 
    margin: 3px 0px; 
    padding: 3px 0px; 
    float: left; 
} 
#loginbox button { 
    margin-top: 30px; 
    float: right; 
} 

HTML（エラークラスの後の後）：

<div class="error" id="loginbox"> 
    <span>Username:</span> 
    <input> 

    <span>Password:</span> 
    <input> 

    <button>Submit</button> 
</div> 

私はおそらく、この手法を悪用だろうか？この問題の助けがあれば幸いです。

おかげで、
クリス隠密

Answer 1

あなたの選択が正しくありません：#loginbox .errorは#loginboxによって選択された要素内に含まれるクラスerrorを持つすべての要素を選択しています。これは、#loginbox inputの動作とまったく同じ方法で動作します - inputの要素を#loginbox divの範囲で選択しています。

クラス/属性セレクタを追加してセレクタを改良するには、を空白なしで連鎖する必要があります。あなたの具体的な例では、スペースを削除して使用します。

#loginbox.error { ... } 

は常に空白であなたのセレクタをseperatingすると、あなたがネストされたタグを選択していることを意味し、覚えておいてください。

Answer 2

問題はここにある：

#loginbox .error { 

あなたが隙間なくそれをターゲットにする必要があるので#loginboxは、クラス.ERRORがあります

#loginbox.error { 

HTML：

<div id="loginbox" class="error"> 
    <span>Username:</span> 
    <input> 

    <span>Password:</span> 
    <input> 

    <button>Submit</button> 
</div> 

Answer 3

変更するとうまくいくはずです

#loginbox .error 

#loginbox.error 

にスペースを追加すると、 #loginboxのサブ要素をスタイリングすることを意味します。空きスペースがない場合は、IDが loginboxであり、クラスが error

の <div />を選択しています