Vue在父组件 scoped样式表中，可以直接修改子组件的根元素的样式。

Vue在父组件 scoped样式表中，可以直接修改子组件的根元素的样式。

With scoped, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.

参考：vue-loader.vuejs.org/guide/scope…

这就是为啥在下面在 scoped的style里可以直接修改el-container el-header el-footer el-aside el-main样式的原因

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>footer</el-footer>
    </el-container>
  </div>

</template>

<script>
export default {
  data() {
    return {
    
</script>

<style scoped>
.el-container {
  background:pink
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>