范围样式的使用方法
作者：佚名 时间：2014-07-17
css的一个强大优势是对继承的使用-继承是数值可以通过选择器层叠以适用于多个元素的方式.但在含有许多样式单的大型网站上工作时,会经常遇到前文中所提到的命名和继承冲突,所以在这种情况下,css的上述优势也可能成为劣势.
范围样式是一种可以防止上述冲突的方法.这些样式应用于使用style元素的文档,这个元素含有scoped属性.另外,这方法中所包含的任何规则都只被其所使用的子元素继承,而且这些规则不会被应用于这个文件的其他地方.
下面的代码显示了上述操作:一个范围样式的标签在一个div元素的内部应用,而作用于h1的规则仅适用于这个元素内部的h1.这规则的范围仅适用于div的子元素.
<div>
<style scoped>
h1{
background-color:#333;
color:#fff;
}
</style>
<h1 id="foo">scoped</h1>
</div>
<h1 id="bar">not scoped</h1>
读者可以查看示例文件scopedg-style.html.在这个文件中,id为#bar的h1按照dom的顺序跟随id为#foo的h1,所以style元素内部的规则同时适用于这两个元素,事实上,scoped属性意味着规则只适用于div母元素.
如没特殊注明，文章均为上海联楷网络原创,转载请注明来自：http://www.linksj.com/hynews/20151126/n3378.html
