如何将一个类添加到div以更改背景颜色？

Question

所以,我有一个浅绿色背景的简单登录页面,并且当id ='loginbox'的'loginbox'div也有类'错误'时,想要将背景颜色更改为浅红色.我的页面如下所示:

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

与相关的HTML看起来像:

HTML(在添加错误类之前):

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

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

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

使用下面给出的CSS,我觉得这应该有效; 但是,在将错误类添加到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正在选择error 包含在所选元素中的类的所有元素#loginbox.这工作正是以同样的方式#loginbox input工作-你选择input要素内的#loginbox股利.

要使用其他类/属性选择器细化选择器,您需要将它们链接在一起而不使用空格.在您的具体示例中,删除空格并使用:

#loginbox.error { ... }

永远记住,用空格分隔你的选择器意味着你要选择嵌套标签.