CSS类不会覆盖边框样式

cyvaqqii 于 2023-01-27 发布在其他

关注(0)|答案(4)|浏览(221)

我已经用灰色边框设置了所有文本字段的样式，对于class="form_field_error"的字段，我希望border-color更改为红色。
我试过下面的代码，但是我不能让我的类覆盖先前定义的边界。我错过了什么？
超文本：

<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

来源：https://stackoverflow.com/questions/17303307/css-class-wont-override-border-style

4条答案

按热度按时间

qvsjd97n1#

input[type="text"] css优先于.form_field_error css。
将其更改为input.form_field_error，边框将工作。

赞(0）回复(0）举报 2023-01-27

gdrx4gfi2#

试试这个：

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

赞(0）回复(0）举报 2023-01-27

4zcjmb1e3#

我建议使用：

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

“！important”规则应该只作为最后的手段-核选项-因为它将超越所有其他基于精确和相关特性来定位元素的尝试，减少您所拥有的控制权，并为未来的开发人员制造潜在的障碍。因此，正确的方式，也是最好的处理方式是从与您试图覆盖的原始选择器相同的选择器开始。然后简单地添加一个东西，使它与原来的区别。这样的特异性将正是你想要的。

赞(0）回复(0）举报 2023-01-27

y0u0uwnf4#

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

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

顺便说一句--你设置为“title”的ID只是为了那个，还是你想重用它？
因为你也可以-〉

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

赞(0）回复(0）举报 2023-01-27

我来回答

CSS类不会覆盖边框样式

4条答案

相关问题

热门标签

最新问答