这里写着http://www.w3.org/TR/html-markup/style.html#style:
允许的父元素
可以包含元数据元素、div、noscript、,
节、条、旁
那<;风格>或多或少在每个位置都被允许(其中<;div>;被允许)
但是,另一方面,我在这里找到了更详细的信息http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-样式范围
可以使用此元素的上下文:(注释:样式)
如果缺少作用域属性:需要元数据内容的位置。 如果缺少scoped属性:在作为head元素的子元素的noscript元素中。 如果存在scoped属性:应该是流内容的位置,但在除元素间空白之外的任何其他流内容之前,而不是作为内容模型是透明的元素的子元素。
在本文件后面部分:
作用域属性是一个布尔属性。如果存在,则表明
样式仅适用于在样式中扎根的子树
元素的父元素,而不是整个文档如果存在作用域属性且元素具有父元素
元素,则样式元素必须是流内容的第一个节点
在其父元素(元素间空白除外)中,以及
父元素的内容模型不能有透明组件
这看起来好像有(或将有)“两个不同的<;style>;元素”:a
<;风格>-全局-~~仅在<;头><;“范围样式”>-仅(!)带有布尔范围属性和~~仅在的开头<;部门>
(请读“~~”如“或多或少”)
但是后面的链接已经有2年多的历史了,所有浏览器(我测试了Chrome、FF、IE、Opera)都解释了流入的<;风格>就好像它在标题中一样。(忽略范围-是-仍然没有标准)
所以我的三部分问题
-
我对W3C文档(2种样式-逻辑)的解释正确吗
-
2015年的现状是什么
-
还有,可能有人在那里,谁知道地平线上会发生什么
这里的许多答案已经有些过时了,因此这里简要总结了scoped属性的使用情况
最初(HTML5之前),<;风格>在之外无效<;头>,但大多数或所有浏览器都支持。“无效”意味着验证器会抱怨它,而规范(W3C的HTML4和XHTML1系列)说不应该这样做。但它奏效了。有时这很糟糕:无论在哪里<;风格>元素出现在文档中,则其规则将应用于整个文档(当然,基于所使用的选择器)。这可能导致作者编写一个“本地”样式表,该样式表仅适用于文档的某个区域,但可能会意外地重新设置其他区域的样式
HTML5的范围属性建议旨在解决这一问题:它会告诉浏览器该表单中的样式只适用于<;风格>的父元素及其子元素。此外,在某些情况下<;样式范围>还必须是其父级的第一个子级,这使任何阅读HTML代码的人都非常清楚其作用域是什么。不带属性的样式元素仅在中保持有效<;头>元素
随着时间的推移,没有足够的供应商实现这一新功能(Firefox和Chrome提供了一些实验性的支持),因此它最终被放弃了。浏览器行为与HTML5之前一样,但当前规范至少记录了它:<;风格>现在在整个文档中都是合法/有效的,但是规范警告潜在的副作用(意外地重新设置元素的样式)
对于当前的规范和浏览器行为,实现“范围化”样式的最佳和最安全的方法是在ID的帮助下显式实现,如以下代码段所示:
<;div id=“myDiv”>;
<;风格>;
#myDiv p{margin:1em 0;}
#myDiv em{color:#900;}
#myDiv无论什么{/*…*/}
</风格>;
<;p>;这里有一些内容</p>;
</部门>;
div有一个id属性,样式表中的所有规则都显式地使用一个id选择器,以确保它们只应用于该div。当然,这仍然需要避免文档中的id冲突,但唯一性已经是id属性的要求
虽然删除了范围属性,但这种方法完成了任务,可读性很好(当然,与任何代码一样,它可能会被混淆,但这不是重点),应该进行验证,并且应该适用于几乎所有与CSS兼容的浏览器
PS:根据规范,<;风格>在内<;车身>应进行验证。然而,Nu验证器(标记为实验性)仍然对此表示不满。在这方面有一个悬而未决的问题:https://github.com/validator/validator/issues/489