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

【问题标题】：site.css not overriding bootstrap.css for .field-validation-errorsite.css 没有覆盖 bootstrap.css 的 .field-validation-error
【发布时间】：2018-08-15 02:25:45
【问题描述】：

我有一个使用 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"));

网站.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>

渲染标签

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

两种方法我都试过了。它仍然没有呈现红色。

【解决方案2】：

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

【讨论】：