7

我已将所有文本字段的样式设置为灰色边框，对于带有 的字段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来说明这个问题。

4

4 回答 4

8

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

将其更改为input.form_field_error，边框将起作用。

于 2013-06-25T17:13:18.983 回答
4

尝试这个：

.form_field_error {
    border: 1px solid #f00 !important;
}
于 2013-06-25T17:14:38.890 回答
1

我建议使用：

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

“！important”规则只能作为最后的手段——核选项——因为它会超越所有其他基于精确和相关特异性针对元素的尝试，减少你的控制并为未来的开发人员创造潜在的障碍。因此，正确的方法和处理它的最佳方法是从与您尝试覆盖的原始选择器相同的选择器开始，然后简单地添加将其与原始选择器区分开来的一件事。这样，特异性将正是您想要的。

于 2018-11-15T17:52:03.483 回答
0

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

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

附带说明一下 - 您设置为“标题”的 ID 仅适用于该 ID，还是您正在考虑重用它？

因为你也可以 ->

#title.form_field_error {
    border: 1px solid red;
}
于 2013-06-25T17:11:34.697 回答