为什么在将类添加到元素时,新样式不会出现在浏览器中？

Question

我有一些css代码样式文本框这样:

input#address
{
   border: 1px solid #dbdbdb;
}

如果有验证错误,我想在该文本框周围显示一个红色边框,所以我也有这个类:

.error
{
   border: 1px solid red;
}

如果出现错误,我会使用JavaScript将此类添加到textbox元素中.然而,由于较早的代码为文本框分配了不同的边框,因此浏览器似乎忽略了这个类.我该如何解决这个问题？

另外,我想保留.error一个可重用的类,可以在解决这个问题时用于其他元素.

Answer 1

虽然@shanethehat是正确的,因为这是问题的选择器的特殊性,请不要使用!important,而是尝试改进您的选择器:

input#address.error {
    border-color: #f00;
}

我之所以恳求与人们不要使用!important,因为该类随后将覆盖任何和所有的其他样式随后应用于该元素.在错误消息的情况下,这可能是您想要的(并且在这种情况下!important是有用的),但是如果您或任何跟随您的开发人员,必须调试持续显示的持久红色边框,尽管需要边框到现在是绿色,!important导致延迟和刺激.删除它通常会导致其他问题.

它几乎总是没有必要,但是,它是非常有用和强大的.

编辑回应@shanethehat的评论(在下面的评论中):

他说他想对其他元素使用相同的规则,所以我更喜欢使用!important而不是维护一个可能很长的特定标识符列表.特别是如果表单将包含动态字段.

当然,这是事实.而我在以前的编辑(" ...该类随后将覆盖增加了预选赛的任何和所有的其他样式随后应用于该元素.在那也许你想要什么错误消息的情况下(在这种情况下!important非常有用) ......").

然而,不要强迫这种过度行为,!important而是通过查看它的祖先来增加选择器的特异性:

form#FormID fieldset input[type=text].error {...}

或者降低原始选择器的特异性:

input[name=address]
/* or, assuming that the address field is of type="text" but, obviously, "textarea" can be substituted
input[type=text]
*/

上述两个选择做虽然依靠属性等于选择器的兼容性,这是不是(据我所知)在IE中存在可靠的(直到最后IE6,反正逝世),所以后者otion可能会引起你一些问题.