带有css类的Html.TextBox与表单验证css冲突(输入验证错误)

Question

有趣的情况.我有一个Html.Textbox(),我从视图中呈现如下:

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

在我的控制器中,我对标题进行了以下有些简化的验证.为了论证,假设它找到错误,并使用modelstate错误信息重新呈现视图.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditBook(string title) {
    Model = new Book(ControllerContext.RequestContext);
    if (String.IsNullOrEmpty(title))
    {
        title = String.Empty;
        ModelState.AddModelError("title", "* Title is a required");
        modelState.SetModelValue("title", ValueProvider["title"]);
    }
    else { // show confirmation }

    if (!ModelState.IsValid)
    {
        return View("EditBook", Model);
    }
}

当页面被重新渲染时,我的html文本框正确地附加了输入验证错误类......但它没用,因为它是第一个附加的类!我需要它覆盖我的文本框上的所有现有样式.html输出如下:

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

假设已定义以下css样式:

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

问题是,我原来的css类"txt"优先,并阻止我能够正确设置错误文本框的样式.

有什么想法吗？

Answer 1

这是一个比ASP.NET MVC特定的CSS问题.您应该查看CSS规范的级联顺序部分.

考虑到这一点,您可以通过如下调整样式来更改样式的优先级:

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

通过在input-validation-error类中添加input元素,两种样式的特异性将是相同的.这将导致样式的声明顺序用于确定优先级(在这种情况下,规范说最后一个声明获胜).

注意上面的例子只是控制优先级的一种方式......可能有更好的方法,但我不是CSS专家.如果您使用CSS标记重新询问CSS问题,则可能会获得更好/更有洞察力的响应.

PS.在确定优先级时,在元素上声明类名的顺序无关紧要.