CSS类未改变文本框边框颜色

Question

我正在使用ASP.NET MVC 3和FluentValidation来验证我的视图模型。

目前，我的文本框样式如下：

input[type="text"]{border:1px solid #c9d7e1;padding-left:2px;}

我有一个针对输入错误的验证器css类：

.input-validation-error{border:1px solid #ff0000;background-color:#ffeeee;}

当验证开始时，文本框的背景颜色是#ffeeee，这是正确的，但它并没有使文本框的边框变成红色（#ff0000）。它仍然是#c9d7e1。我该如何更改样式以使文本框的边框变为红色？

我还将我的文本区域定义为：

textarea{border:1px solid #c9d7e1;padding-left:2px;}

然后边框的颜色将被设置为红色。

- Brendan Vogt

Answer 1

因为 input[type="text"] 的优先级更高，比.input-validation-error更具体，所以它具有优先权。

input[type="text"].input-validation-error{
    border:1px solid #ff0000;
    background-color:#ffeeee;
}

会完成任务。

- Quentin

---

我在样式中也定义了一个textarea，其属性与文本框完全相同，其边框颜色设置为红色。这是我的CSS类：textarea{border:1px solid #c9d7e1;padding-left:2px;} - Brendan Vogt

没有所谓的CSS类。那是一个CSS规则集。它甚至没有类选择器。 - Quentin

为什么将文本区域的边框设置为红色而不是文本框？这没有意义。 - Brendan Vogt

因为 textarea 比 .input-validation-error 不够具体，而后者比 input[type="text"] 不够具体。 - Quentin

它有效。有没有更短的方法来完成这个：input[type="text"].input-validation-error{border:1px solid #f00;background-color:#fee;}textarea.input-validation-error{border:1px solid #f00;background-color:#fee;} - Brendan Vogt