不同 css 预处理器使用深度作用选择器的区别总结

在修改第三方组件库的样式的时候，经常需要用到深度作用选择器实现样式穿透。

对于 CSS 或者 stylus，语法是使用 >>>。比如下面这样：

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

<style lang="stylus" scoped>     
  .parent {
     >>> .son {
       background-color: red;   
    }
}
</style>

对于 sass / scss / less / stylus 等预处理器 ，语法是使用 /deep/，比如下面这样：

<style lang="xxxx" scoped>     
  .parent {
     /deep/ .son {
       background-color: red;   
    }
  }
</style>

不过，如果 .parent 中还有其它子元素需要修改样式，难道每次都要在子元素前面声明 /deep/ 或者 >>> 吗？其实不用，我们只需要给最外层的元素套用深度选择器即可：

<style lang="xxxx" scoped>     
  /deep/ .parent {
     .son {
       background-color: red;   
    }
     .anotherSon {
        background-color: black;     
    }
  }
</style>

在使用 /deep/ 的时候可能会遇到编译报错的问题，为了避免这种情况，以及为了提高编译速度，如果我们是使用 Vue 开发，还可以使用更加统一的 ::v-deep：

<style lang="xxxx" scoped>     
  .parent {
     ::v-deep .son {
       background-color: red;   
    }
  }
</style>