Question

我使用jQueryVal有一个MVC表单（带有布局页面_Layout.cshtml）。当我使用空的必填字段提交时，验证消息正确显示但未应用Site.css中的样式（覆盖bootstrap.css）。我怀疑是因为jQueryVal正在运行客户端。我发现使其工作的唯一方法是将实际样式放在_Layout页面上。

BundleConfig.cs
    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/Site.css"));

的site.css

.field-validation-error {
    color: red;
    font-weight: bold;
}

_Layout.cshtml（此样式块有效，但放置在Site.css时无效）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans" rel="stylesheet">
    @Styles.Render("~/Content/css")

    @*TODO site.css not overriding validation error text color*@
    <style>
            .field-validation-error {
                color: red;
                font-weight: bold;
            }
        </style>

呈现标签 Rendered Tags

Answer 1

我在IE中试过这个页面，红色验证错误的样式运行正常。显然，在Chrome中，使用.cshtml utf-8元数据标头，它还希望.css文件也是utf-8。谁知道？？我在Notepad ++中打开了一个新文档，确保它是utf-8，粘贴我的.css内容，保存它覆盖现有的.css和LIKE MAGIC！有用！：）

Answer 2

在layout.cshtml中你使用过！important，但在site.css中没有 - 你试过在site.css中使用它吗？如果是，您是否尝试过级联css，例如

body .field-validation-error {
    color: red !important;
    font-weight: bold !important;
}

site.css没有覆盖.field-validation-error的bootstrap.css

2 个答案: