范围样式的使用方法

时间：2014-7-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母元素.