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

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

相关的HTML如下所示：

添加错误类之前的HTML：

用户名： 密码： 提交 有了下面给出的CSS，我觉得这应该是可行的；但是，将error类添加到div时，什么也没有发生

CSS:

登录箱{ 保证金：自动； 填充：25px 50px； 宽度：300px； 高度：100px； 边框：1px实心e9e9e9； 背景：EBFFEF； } 登录框错误{ 背景：FFEBEB； } 登录框输入{ 高度：15px； 利润率：3px0px； 宽度：190px； 浮动：对； } 登录箱跨度{ 高度：15px； 宽度：60px； 利润率：3px0px； 填充：3px0px； 浮动：左； } 登录框按钮{ 边缘顶部：30px； 浮动：对； } 错误后的HTML类：

用户名： 密码： 提交 我是否可能误用了这项技术？在这件事上的任何帮助都将不胜感激

谢谢，

---

Chris Covert

您的选择器不正确：loginbox。错误是选择loginbox所选元素中包含类错误的所有元素。这与loginbox输入的工作方式完全相同——您正在loginbox div中选择输入元素

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

#loginbox.error { ... }

请始终记住，用空格分隔选择器意味着您选择的是嵌套标记。

问题在于：

#loginbox .error {

loginbox具有class.error，因此您需要将其作为目标，并且在以下各项之间没有空格：

#loginbox.error {

HTML:

---

如果你改变了，应该可以正常工作

#loginbox .error

到

添加空格意味着您正在设置loginbox的子元素的样式。由于没有空间，我们正在选择id为loginbox的，并且出现了类错误

#loginbox .error

#loginbox.error