每天一点小进步--css的scoped和深度选择器

1.大家都知道<style>具有scoped属性时，样式只会生效于当前组件。具体的实现原理呢？

<style scoped>
  .bg {
    background-color: red;
  }
</style>

浏览器编译后

<style>
  .bg[data-v-f3f3eg9] {
    background-color: red;
  }
</style>

其实，就是给样式加了一个属性，然后实现了私有作用域。但是当你想在scoped的影响下改变子组件的样式时，就会出现问题，这时候就需要用到深度选择器>>>。

<style scoped>
  .parent >>> .child {
    color: red;
  }
</style>

编译后：

<style>
  .parent[data-v-f3f3eg9] .child {
    color: red;
  }
</style>

当然如果你使用了sass，less等预编译语言，>>>是没法用的，你可以使用/deep/来代替。 

<style scoped>
  .parent /deep/ .child {
    color: red;
  }
</style>

通过vue-cli3搭建的项目需要使用 ::v-deep。

<style scoped>
  ::v-deep .parent .child {
    color: red;
  }
</style>

vue3.0中用法再次发生改变, 使用:v-deep()

<style scoped>
  .parent :v-deep(child) {
    color: red;
  }
</style>