Question

我需要覆盖Razor页面中的一些<style>元素，所以我在打开的代码块之后立即插入了样式：

@{
    ViewBag.Title = "New Account";
    Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
    #main
    {
        height: 400px;
    }
</style>

页面在浏览器中正确呈现，但<style>处的Visual Studio绿色曲线抱怨：

<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>

我已经对主页进行了双重检查 - 没有突出显示的问题。

Visual Studio目前期待什么？在逐页的基础上覆盖样式的正确方法是什么？通过jQuery？

Answer 1

样式元素不能嵌套在<body>的{{1}}或子元素下，而是应该转到页面的<body>元素。

如果您尝试覆盖这样的样式，它们会被<head>插入到布局页面的默认部分，我假设它位于布局页面的@RenderBody()内，而默认样式仍然留在<body>。

使用Razor部分，从内容页面覆盖布局页面的某些部分的正确方法将是这些内容：

_layout.cshtml

<head>

page.cshtml

<head>
@if (IsSectionDefined("Style"))
{
    @RenderSection("Style");
}
else
{
    <style type="text/css">
    /* Default styles */
    </style>
}
</head>
<body>
@RenderBody()
...

现在，如果在内容页面上定义了@{ Layout = "layout.cshtml"; } @section Style { <style type="text/css"> #main { height: 400px; } </style> }  ...部分，则其内容将覆盖布局页面中的默认值。

我建议您阅读有关Razor布局和部分的更多信息。 ScottGu的一篇很好的文章可以找到here。

关于Visual Studio标记验证警告

当构成单个页面的标记在这样的不同文件之间拆分时，Visual Studio会出现问题。在大多数情况下，Visual Studio（或任何此类IDE）无法知道最终如何将不同的页面片段动态组合在一起。所以通常你不能避免在项目上发出一些警告。

如果我知道自己在做什么，结果页面会通过标记验证（http://validator.w3.org/），我个人会忽略这些警告。

如果您确实要隐藏警告，则需要在Visual Studio中禁用相应的验证选项。例如。对于Visual Studio 2012中的HTML，可以在工具＆gt;中完成。选项＆gt;文本编辑器＆gt; HTML＆gt;验证

Answer 2

这似乎是使用Razor的一个怪癖。验证器不能“看到”整个HTML，因为它分散在多个文件中，使用Razor逻辑将它们全部重新组合在一起。

我刚想通过的技巧是从验证器中“隐藏”<style>和</style>。而不是：

<style>

使用：

@MvcHtmlString.Create("<style type\"text/css\">")

而不是：

</style>

使用：

@MvcHtmlString.Create("</style>")

验证者不理解这些行正在生成<style>和</style>，因此它会停止抱怨它们。

确保您在@section XXX元素周围使用<style>，其中“XXX”引用HTML @RenderSection(name: "XXX", required: false)元素内的主文件中的<head> 。这是确保<style>元素插入其所属的<head>元素所必需的。

Answer 3

我已经在我的项目中看到过这种情况。幸运的是，当你运行程序时，它会自行计算，所有内容都应按预期呈现。

由于设计时内容分离，我相信剃刀页面的一些警告可以安全地忽略。

如果实际上没有识别CSS，请确保将其添加到问题中，但如果你所做的只是尝试获得完美的无警告构建，那么你可能只需将VS设置为忽略解析器这些错误。

Answer 4

样式标记应位于head标记中，而不在body标记中。

您应该在布局的head标记中创建一个区域，并将style标记放在该区域中。

Answer 5

如果您在浏览器中显示了一个页面，那么您有

<style type="text/css">
 //some other style stuff, then

 <style type="text/css">
  #main
  {
    height: 400px;
  }
 </style>
</style>

这就是验证者的意思。

如果页面通过W3 validation test，则忽略VS.我认为它与Razor有点挣扎。

Answer 6

我认为你应该在HeadContent中设置样式

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
     <style type="text/css">
        .hideGridColumn {
            display: none;
        }
    </style>
    
</asp:Content>

对我有好处。

为什么我收到错误消息“元素'样式'不能嵌套在元素'样式'中？”？

6 个答案:

_layout.cshtml

page.cshtml

关于Visual Studio标记验证警告