Html 在此上下文中不允许元素样式作为元素主体的子元素(<style scoped> 未验证)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27539084/
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
Element style not allowed as child of element body in this context (<style scoped> not validating)
提问by mikeybeck
<!DOCTYPE html>
...
<style scoped>
/* css */
</style>
The w3.org validator is giving me this error:
w3.org 验证器给了我这个错误:
Line 883, Column 17: Element style not allowed as child of element body in this context.
(Suppressing further errors from this subtree.)
<style scoped>...
Contexts in which element style may be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.
Content model for element body:
Flow content.
It is my understanding that the 'scoped' property makes it ok for the style tag to be outside the head of the document. So why is the validator unhappy with it?
我的理解是 'scoped' 属性使得样式标签可以位于文档头部之外。那么为什么验证者对此不满意呢?
(I'm using Wordpress and this code is produced by a plugin, which is why I can't just put it in the head.)
(我正在使用 Wordpress,这段代码是由插件生成的,这就是为什么我不能把它放在头上。)
EDIT: This doesn't validate -
编辑:这不验证 -
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<script type="text/javascript"></script>
<style scoped></style>
</body>
</html>
But it does if the script tag goes after the style tag. What is the reason for that?
但如果 script 标签跟在 style 标签之后,它就会这样做。这是什么原因?
回答by Jukka K. Korpela
The W3C Markup Validator, when acting as an HTML5 checker, handles this issue according to various drafts such as HTML 5.1 Nightly, which right now says that the style
element may appear only inside the head
element, except when the scoped
attribute is present, in which case it may appear “where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent”. In your actual example, the element appears after a script
element (which is counted as flow content). Changing the order of the elements thus changes the syntax to valid, under the given definition.
W3C 标记验证器在充当 HTML5 检查器时,会根据各种草案(例如HTML 5.1 Nightly )处理此问题,该草案现在表示该style
元素只能出现在head
元素内部,除非scoped
存在该属性,在这种情况下可能出现“在预期流内容的地方,但在元素间空白和样式元素之外的任何其他流内容之前,而不是作为内容模型透明的元素的子元素”。在您的实际示例中,元素出现在script
元素之后(被视为流内容)。在给定的定义下,更改元素的顺序从而将语法更改为有效。
Alternatively, you can just wrap the style
element in a div
element:
或者,您可以将style
元素包装在一个div
元素中:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<script type="text/javascript"></script>
<div>
<style scoped></style>
</div>
</body>
</html>
The scoped
attribute is not valid at all according to the W3C Recommendation HTML5. It was present in HTML5 drafts, but it was dropped from the Recommendation due to lack of implementations, but it is still in the “standardization track” and may make its way to HTML 5.1.
scoped
根据 W3C 建议HTML5,该属性根本无效。它存在于 HTML5 草案中,但由于缺乏实现而从建议书中删除,但它仍处于“标准化轨道”,并可能进入 HTML 5.1。
Note that existing browsers generally ignore the scoped
attribute and allow a style
element almost anywhere and apply its content to the entire HTML document (even parts that precede the style
element).
请注意,现有浏览器通常会忽略该scoped
属性并允许style
元素几乎在任何位置并将其内容应用于整个 HTML 文档(甚至是style
元素之前的部分)。