Question

我使用灰色边框设置了所有文本字段的样式，对于class="form_field_error"字段，我希望边框颜色更改为红色。

我尝试过以下代码，但是我无法让我的类覆盖以前定义的边框？我错过了什么？

HTML：

<input type="text" name="title" id="title" class="form_field_error">

CSS：

input[type="text"] {
    display: block;
    height: 15px;
    font-weight: normal;
    color: #777;
    padding: 3px;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.form_field_error {
    border: 1px solid #f00;
}

我创建了一个jsFiddle来说明问题。

Answer 1

input[type="text"] css优先于.form_field_error css。

将其更改为input.form_field_error，边框将有效。

Answer 2

试试这个：

.form_field_error {
    border: 1px solid #f00 !important;
}

Answer 3

您是否尝试过指定应用红色边框的div？

 input.form_field_error {
    border: 1px solid red;
 }

在旁注 - 你设置为'标题'的ID只是针对那个，或者你是否考虑重复使用？

因为你也可以这样做 - ＆gt;

#title.form_field_error {
    border: 1px solid red;
}

Answer 4

我建议使用：

input[type="text"].form_field_error {
    border: 1px solid red;
}

“！重要”规则仅应作为不得已而为之的选择-核选择-因为它将超越所有其他基于精确和相关特异性来瞄准某个元素的尝试，从而减少了您的控制力并为未来创造了潜在的障碍开发人员。因此，正确的方法和最佳的处理方法是从与要覆盖的原始选择器相同的选择器开始，然后简单地添加一个将其与原始选择器区分开的东西。这样，特异性就正是您想要的。

CSS类不会覆盖border-style

4 个答案: