一、Vue中深度作用选择器，有作用域的 CSS

规定一： 应用 scoped 后，父组件的款式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件能够从布局的角度登程，调整其子组件根元素的款式。
  • 引出场景一：在组件中用了第三方组件，然而第三方组件class款式须要咱们从新定制，比方咱们引入了ElementUI组件库，咱们须要对应用的组件中存在的class="el-form-item__label"款式进行批改，这时咱们间接对el-form-item__label进行款式批改是不行的。
  • 解决方案1：
  • 解决方案2：有些像 Sass 之类的预处理器无奈正确解析 >>>。这种状况下你能够应用 ::v-deep 操作符取而代之——这是一个 >>> 的别名，同样能够失常工作。
  • 场景一的利用：
  • 场景一的原理：理论就是对el-form-item__label款式前加上了[data-v-30be3d08]属性，这个属性和scoped生成的属性统一，这样才做到深度作用。