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

【问题标题】：Why do I get the error message "Element 'style' cannot be nested within element 'style'"?为什么我会收到错误消息“元素'样式'不能嵌套在元素'样式'中”？
【发布时间】：2023-03-27 18:59:01
【问题描述】：

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

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

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

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

我已经仔细检查了母版页 - 没有突出显示的问题。

Visual Studio 在这一点上期待什么？逐页覆盖样式的正确方法是什么？通过 jQuery？

【问题讨论】：

标签： css razor

【解决方案1】：

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

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

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

_layout.cshtml

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

page.cshtml

@{        
    Layout = "layout.cshtml";
}
@section Style
{
    <style type="text/css">        
    #main        
    {        
        height: 400px;        
    }
    </style>
}
<!-- Body content here -->
...

现在，如果在内容页面上定义了 Style 部分，则其内容将覆盖布局页面中的默认值。

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

关于 Visual Studio 标记验证警告

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

如果我知道自己在做什么并且生成的页面通过了标记验证 (http://validator.w3.org/)，我个人会忽略这些警告。

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

【讨论】：

这是将 css 放入页面的正确方法，但实际上并不能修复验证警告。
@TedElliott 你是对的。我用标记验证警告的信息更新了答案。
谢谢，它用部分页面解决了我的 css 问题。否则我在部分页面上的样式标签被放置在一个 div 中并且它不起作用。

【解决方案2】：

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

我刚刚发现的技巧是对验证器“隐藏”<style> 和 </style>。而不是：

<style>

使用：

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

而不是：

</style>

使用：

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

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

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

【讨论】：

【解决方案3】：

我在我的项目中也看到过这种情况。幸运的是，当您运行该程序时，它会自行判断，并且一切都应按预期呈现。

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

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

【讨论】：

【解决方案4】：

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

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

这对我有好处。

【讨论】：

【解决方案5】：

样式标签应该在head标签中，而不是body标签中。

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

【讨论】：

【解决方案6】：

如果您查看浏览器中显示的页面，您有吗

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

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

正如验证器所暗示的那样。

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

【讨论】：