vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。

　　vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素，它是通过使用PostCSS来改变以下内容实现的：

 

//渲染结果

 

一、混合使用全局属性和局部属性

 

 

二、关于子组件的根元素

　　使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，这么设计的目的是父组件可以对子组件根元素进行布局。
　　.vue模板中的样式是根据需要按需加载，访问一个页面该组件中的样式就会追加到head标签中，如果父子组件中都对某个子组件根节点元素进行了控制，则父组件里的样式会被后来的覆盖。

三、深选择器

　　如果想对设置了scoped的子组件里的元素进行控制可以使用  ’>>>’  或者  ’deep’

 

 

　　一些预处理程序，例如sass不能解析>>>属性，这种情况下可以用deep，它是>>>的别名，工作原理相同。

四、动态生成的内容

　　使用v-html动态创建的DOM内容，不受设置scoped的样式影响，但你依然可以使用深选择器进行控制

五、vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题

　　在vue的开发中，我们需要引用子组件，包括ui组件（element、iview）。但是在父组件中添加scoped之后，在父组件中书写子组件的样式是无效果的。去掉scoped之后，样式可以覆盖。但这样会污染全局样式，为了解决这个问题，vue-loader新增书写方式。

　　父组件

　　子组件

　　效果

　　这样的写法及修改了子组件的样式，又不会污染全局样式！