Asp.net mvc 指定了css类的Html.TextBox与表单验证css冲突（输入验证错误）

有趣的情况。我有一个Html.Textbox（），从视图中呈现，如下所示：

<%= Html.TextBox("title", Model.Title, new { @class = "txt" }) %>

<input type="text" name="title" id="title" class="input-validation-error txt"/>

input.txt { border: 1px; color: #000 }
input.input-validation-error { border: 2px solid #fff }

重新呈现页面时，我的html文本框正确地附加了输入验证错误类。。。但它是没用的，因为它是头等舱！我需要它来覆盖文本框上的所有现有样式。html输出如下所示：

<%= Html.TextBox("title", Model.Title, new { @class = "txt" }) %>

<input type="text" name="title" id="title" class="input-validation-error txt"/>

input.txt { border: 1px; color: #000 }
input.input-validation-error { border: 2px solid #fff }

问题是，我原来的css类“txt”优先，使我无法正确设置错误文本框的样式

---

有什么想法吗？

这更像是一个CSS问题，而不是ASP.NET MVC特有的问题。您应该看看的级联顺序部分

考虑到这一点，您可以通过如下方式调整样式的优先级：

<%= Html.TextBox("title", Model.Title, new { @class = "txt" }) %>

<input type="text" name="title" id="title" class="input-validation-error txt"/>

input.txt { border: 1px; color: #000 }
input.input-validation-error { border: 2px solid #fff }

将输入元素添加到输入验证错误类后，两种样式的特殊性将是相同的。这将导致使用样式的声明顺序来确定优先级（在这种情况下，规范称最后一个声明的样式获胜）

请注意，上面的示例只是控制优先级的一种方法。。。也许有更好的方法，但我不是CSS专家。如果你用CSS标签作为CSS问题提问，你可能会得到更好/更深刻的回答

---

注：在确定优先级时，在元素上声明类名的顺序是不相关的。

如果添加！重要提示：它应该有助于解决此问题

.input-validation-error { border: 2px solid #fff !important; }

另外，稍微修改一下@DSO所说的内容，我很确定您也可以尝试以下方法：

input.txt { border: 1px; color: #000 }
input.txt.input-validation-error { border: 2px solid #fff }

---

正如我所说，如果你有两个CSS类，我很确定你可以做到这一点。

我完全不依赖框架来呈现样式，而是采用了一种方法，我可以应用我自己的CSS类，同时仍然使用Html.ValidationMessage（）基础设施的大部分

看起来像这样：

<% bool emailError = !String.IsNullOrEmpty(Html.ValidationMessage("email"));  %>
<div id="EmailMod" class="module <%= emailError ? "error" : String.Empty %>">
    <label class="text_right">Email address</label>
    <div class="input">
        <input type="text" id="Email" name="Email" class="input" tabindex="1" />
        <p id="EmailRequired" class="required <%= emailError ? "" : "hide" %>">* Please enter a valid email address.</p>
    </div>
</div>

电子邮件地址
*请输入有效的电子邮件地址

请注意，IE6中的多类选择器（input.txt.input validation error）存在缺陷-请参阅，我不知道，谢谢。我想试试这个！请记住，CSS规则可以有多个选择器：

input.input-validation-error、.input-validation-error、.input-validation-error{border:2px solid#fff}

，这样就不会丢失类输入验证错误的非元素的样式。