vue scoped，子组件的根节点依然受其父组件的CSS 的影响

vue-loader文档

我们都知道，vue scoped 的作用是避免 css 全局作用域的影响

以下截图来自vue-loader 官网页面对scoped css 原理的介绍

官网文档上也说明了子组件根元素会受到父组件同名css样式影响，截图如下

vue scoped，子组件的根节点依然受其父组件的CSS 的影响

文档中提到，子组件根节点样式会受到父组件样式影响，这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

但是，现在，我不希望子组件根元素样式受到父组件影响，怎么做呢？

我们先来看一下，具体是怎么相互影响的呢？

父组件

<template>
  <div class="root">
    <span>父组件</span>
    <child-component></child-component>
  </div>
</template>

<script>
import Child from "./child";
export default {
  components: {
    "child-component": Child
  }
};
</script>

<style scoped>
.root {
  color: green;
  padding: 40px;
}
</style>

父组件代码