关于vue单页面的scoped覆写css问题

关于子组件的根元素

使用了默认的scoped属性之后，子组件会优先运行在该页面的与父组件同名的style，并且不会全面继承复写父组件的style样式，然而如果父组件的style也设置为scoped，那么子组件的根节点元素在受到自己的style样式影响的同时也会受到设置了scoped的父组件style的影响。

.vue模板中的样式是根据需要按需加载，访问一个页面该组件中的样式就会追加到head标签中，如果父子组件中都对某个子组件根节点元素进行了控制，则父组件里的样式会被后来的覆盖。

深选择器

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

<template>
  <div id="app">
    <gHeader></gHeader>
  </div>
</template>

<style lang="css" scoped>
  .gHeader /deep/ .name{ //第一种写法
    color:red;
  }
  .gHeader >>> .name{   //二种写法
    color:red;
  }
</style>

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