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

Question

所以，我有一个简单的登录页面，它有一个浅绿色背景，当 id = 'loginbox' 的 'loginbox' div 也有一个类 'error' 时，我想将背景颜色更改为浅红色。我的页面如下所示:

VALID 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 input 的工作方式完全相同 - 您选择input 元素 within #loginbox分区

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

#loginbox.error { ... }

永远记住，用空格分隔选择器意味着您选择的是嵌套标签。