HTML5中的Scoped属性

style标记上新出现的这个scoped属性可以让CSS样式只对局部元素生效，具体说，就是存放这段style样式的元素的子元素生效，跟平常的样式不一样的唯一地方就是新加了一个scoped属性：
代码如下:

<style scoped>/* styles go here */</style>

具有scoped属性的样式只会应用到当前元素和其子元素。Inline样式仍然比scoped样式优先级高，所以，最好避免使用inline样式，下面是将几种样式混合到一起比较它们的作用效率范围：

代码如下:

<div class="democontain lazy "><div>
<style scoped>
div {
 border: 1px solid green; margin-bottom: 20px; min-height: 40px;
 }
.democontain {
 background: #f8f8f8;
 }
</style>

<div style="border-color: pink;"><div>
<style scoped>
div {
 background: lightblue; border: 1px solid blue; 
}
</style>

在scoped样式里可以使用任何合法的CSS样式标记，比如媒体查询，就像下面这样：

代码如下:

<style scoped>
@media only screen and (max-width : 1024px) {
div { background: #000; }
}
</style>

这个新出现的scoped属性是非常有用的功能，尤其对那些创作模板的，或CMS用户，或某些无法操作整个样式文件的开发人员。但需要注意的是，有些老式的浏览器上不支持这个属性的。

在vue组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件，同样的，如果子组件也用scoped标识了，那么在父组件中是不能设置子组件中的节点的。若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点的样式的，因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了，不会作用与其他的组件样式，我在用vue-quill-editor富文本编辑器的时候就遇到了这个坑，我只是想让内容区设置一个高度，这样的话，是必须在App.vue中设置的，我们App.vue相当于根容器，没有设置scoped，所以是可以设置的。