element css修改

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

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

1
2
3
4
.blue-header .el-card >>> .el-card__header {
  background-color: #409EFF;
}

1
2
3
<div class="volume blue-header">
    <el-card class="box-card">
    ...