CSS 为什么我会收到错误消息“元素 'style' 不能嵌套在元素 'style' 中”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8401242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why do I get the error message "Element 'style' cannot be nested within element 'style'"?
提问by justSteve
I need to override some <style>elements within my Razor page so I've inserted the styles immediately after the opening code block:
我需要覆盖<style>Razor 页面中的一些元素，因此我在打开代码块之后立即插入了样式：
@{
ViewBag.Title = "New Account";
Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
#main
{
height: 400px;
}
</style>
The page renders correctly in the browser but Visual Studio green squiggles at <style>complaining that:
该页面在浏览器中正确呈现，但 Visual Studio 绿色波浪形<style>抱怨：
<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>
I've doublechecked the master page - no problems highlighted there.
我已经仔细检查了母版页 - 那里没有突出显示问题。
What's Visual Studio expecting at this point? What's the correct way to override styles on a page by page basis? Via jQuery?
Visual Studio 在这一点上期待什么？逐页覆盖样式的正确方法是什么？通过jQuery？
回答by famousgarkin
The style element cannot be nested under the <body>or child elements of the <body>, instead it should go to the <head>element of the page.
样式元素不能嵌套在 的<body>或 子元素下<body>，而应该<head>放在页面的元素中。
If you try to override the styles like this, they get inserted into the default section of your layout page by @RenderBody(), which I assume is inside the <body>of the layout page, while the default styles still stay in the <head>.
如果您尝试覆盖这样的样式，它们会通过 插入到布局页面的默认部分中@RenderBody()，我假设该<body>部分位于布局页面的内部，而默认样式仍保留在<head>.
The proper way to override some part of the layout page from the content page would be something along these lines, using Razor sections:
从内容页面覆盖布局页面的某些部分的正确方法是使用 Razor 部分：
_layout.cshtml
_layout.cshtml
<head>
@if (IsSectionDefined("Style"))
{
@RenderSection("Style");
}
else
{
<style type="text/css">
/* Default styles */
</style>
}
</head>
<body>
@RenderBody()
...
page.cshtml
页面.cshtml
@{
Layout = "layout.cshtml";
}
@section Style
{
<style type="text/css">
#main
{
height: 400px;
}
</style>
}
<!-- Body content here -->
...
Now if the Stylesection is defined on the content page, its contents will override the defaults from the layout page.
现在，如果在Style内容页面上定义了该部分，则其内容将覆盖布局页面的默认值。
I suggest you read more on Razor layouts and sections. A nice article on this by ScottGu can be found here.
我建议您阅读有关 Razor 布局和部分的更多信息。可以在此处找到 ScottGu 撰写的一篇关于此的好文章。
Regarding Visual Studio markup validation warnings
关于 Visual Studio 标记验证警告
Visual Studio has a problem when markup that makes up a single page is being split up between different files like this. In most cases there is no way for Visual Studio (or any such IDE for that matter) to know how the different page fragments will be dynamically put together in the end. So usually you can't avoid some of these warnings on a project.
当组成单个页面的标记在这样的不同文件之间拆分时，Visual Studio 会出现问题。在大多数情况下，Visual Studio（或任何此类 IDE）无法知道最终如何将不同的页面片段动态组合在一起。所以通常你无法避免项目中的一些警告。
Personally I would ignore the warnings if I know what I'm doing and the resulting pages pass the markup validation (http://validator.w3.org/).
就我个人而言，如果我知道自己在做什么并且结果页面通过了标记验证（http://validator.w3.org/），我会忽略这些警告。
If you really want to hide the warnings, you need to disable the appropriate validation options in Visual Studio. E.g. for HTML in Visual Studio 2012 this can be done in Tools > Options > Text Editor > HTML > Validation.
如果您真的想隐藏警告，则需要在 Visual Studio 中禁用相应的验证选项。例如，对于 Visual Studio 2012 中的 HTML，这可以在工具 > 选项 > 文本编辑器 > HTML > 验证中完成。
回答by kburgoyne
This appears to be a quirk of using Razor. The validator can't "see" the overall HTML because it's scattered across multiple files using Razor logic to piece it all back together again.
这似乎是使用 Razor 的一个怪癖。验证器无法“看到”整个 HTML，因为它分散在多个文件中，使用 Razor 逻辑将它们重新组合在一起。
The trick I just figured out is to "hide" the <style>and </style>from the validator. Instead of:
我刚刚想出的技巧是对验证器“隐藏”<style>和</style>。代替：
<style>
use:
用：
@MvcHtmlString.Create("<style type\"text/css\">")
And instead of:
而不是：
</style>
use:
用：
@MvcHtmlString.Create("</style>")
The validator doesn't understand these lines are generating <style>and </style>, so it stops complaining about them.
验证器不了解这些行正在生成<style>和</style>，因此它停止抱怨它们。
Make sure you're using a @section XXXaround the <style>element where "XXX" is referencing a @RenderSection(name: "XXX", required: false)in a master file that is within the HTML <head>element. This is necessary to make sure the <style>element gets inserted in the <head>element where it belongs.
确保@section XXX在<style>元素周围使用 a ，其中“XXX”引用 @RenderSection(name: "XXX", required: false)HTML<head>元素内的主文件中的 a 。这对于确保<style>元素被插入到<head>它所属的元素中是必要的。
回答by IronicMuffin
I've seen this happen on my projects as well. Fortunately, when you run the program, it figures itself out and everything should render as expected.
我在我的项目中也看到过这种情况。幸运的是，当您运行该程序时，它会自行计算，并且一切都应该按预期呈现。
Due to the separation of content at design time, I believe a few of the warnings from razor pages can be safely ignored.
由于设计时的内容分离，我相信可以安全地忽略来自剃刀页面的一些警告。
If the CSS isn't actually being recognized, make sure to add that to the question, but if all you're doing is trying to get a perfect no warnings build, then you might just have to set VS to ignore parser errors such as these.
如果 CSS 实际上没有被识别，请确保将其添加到问题中，但如果您所做的只是尝试获得完美的无警告构建，那么您可能只需要设置 VS 以忽略解析器错误，例如这些。
回答by Guffa
The style tag should be in the headtag, not in the bodytag.
样式标签应该在head标签中，而不是在body标签中。
You should make a region in the headtag in your layout, and put the styletag in that region.
您应该head在布局中的标签中创建一个区域，并将标签放在该style区域中。
回答by Neil Thompson
If you ViewSource one the page as it appears in the browser have you got
如果你 ViewSource 一个页面，因为它出现在浏览器中，你有
<style type="text/css">
//some other style stuff, then
<style type="text/css">
#main
{
height: 400px;
}
</style>
</style>
As that's what the validator implies.
因为这就是验证器所暗示的。
If the page passes a W3 validation test, just ignore VS. I think it struggles a bit with Razor.
如果页面通过了W3 验证测试，则忽略 VS。我认为它与 Razor 有点挣扎。
回答by ToanTV
I think you should be set style in HeadContent
我认为你应该在 HeadContent 中设置样式
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.hideGridColumn {
display: none;
}
</style>
</asp:Content>That good for me.
那对我有好处。
