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]
*/

以上两个选择器做虽然依赖于attribute-equals选择器兼容性，但这并非（据我所知）reliably present in IE（直到最终IE6通过为止），无论如何），所以后一种情况可能会给你带来一些问题。

Answer 2

尝试将!important添加到错误规则中，否则它不够具体，并且会被非常具体的input#address覆盖。

.error
{
   border: 1px solid red !important;
}

Answer 3

您的第一条规则使用了ID（#address），因此比仅使用类的第二条规则更具体。所以第一条规则是使用的规则。

Answer 4

这里的问题是特异性。

您的输入＃地址选择器比.error选择器更具体，因为它影响更窄的元素集。

解决这个问题的方法是将.error CSS修改为：

border: 1px solid red !important;

Answer 5

我认为将边框指定为ID和类会导致一些问题，正如您所发现的那样（以及其他人提到过）。在我的头顶，而不是通过JavaScript分配.error类，你也可以直接改变风格

Answer 6

无论

input#address.error {}

或input#error {}

您真正应该做的是使用class设置输入样式。

然后您可以更轻松地重复使用.error，因为它不必与#id选择器争用特异性。

input.address {} input.address.error {}

我建议为输入创建一个更通用的类，这样你就可以将它应用到任何文本字段并且仍然有意义。

Answer 7

可能是一个干扰它的班级。在fiddle

上查看此示例

<input id="mytextbox" class="something error" />
<input id="mytextox2" class=" error something" />

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

7 个答案: