CSS 类不会覆盖边框样式答案

【问题标题】：CSS class won't override border-styleCSS 类不会覆盖边框样式
【发布时间】：2013-06-25 17:02:19
【问题描述】：

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

【问题讨论】：

标签： css overriding border border-color

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

我建议使用：

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

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

【讨论】：

【解决方案4】：

你有没有试过指定哪个 div 像这样应用红色边框？

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

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

因为你也可以这样做->

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

【讨论】：