Vue项目中CSS样式设置了scoped后，部分属性失效 解决方案

Vue项目中，子组件的样式设置了scoped之后，一些CSS样式会失效。

原因： 使用 scoped 后，父组件的样式将不会渗透到子组件中。但是一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。

解决方案：
使用深度作用选择器，即 >>> 操作符，或使用 /deep/ 或 ::v-deep 操作符，后两者都是 >>> 的别名，三者效果一样。

例如：

.my_order_box >>> .el-table .cell {
  text-align: center;
}
.my_order_box >>> .el-table tr td:nth-child(4) .cell {
  text-align: left;
}

或者

.my_order_box /deep/ .el-table .cell {
  text-align: center;
}
.my_order_box /deep/ .el-table tr td:nth-child(4) .cell {
  text-align: left;
}

官网链接：https://vue-loader.vuejs.org/zh/guide/scoped-css.html