vue深度选择器 /deep/ ::v-deep >>>的使用

 

css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。

这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。

如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 深度选择器了。

 

/deep/的用法 :

 

.div /deep/.el-input_inner {

  color: red;

}

 

::v-deep的用法：

　　注意：VUE3.0下/deep/的使用可能会有报错。

 

.div ::v-deep .el-input_inner {

  color: red;

}

 

>>>的用法：

原生css当中应使用 >>> 

 

>>> .el-input_inner {

  color: red;

}

 

<style lang="less" scoped>

　　.div /deep/.el-input_inner {

 　　 color: red;

　　}

　　.div ::v-deep .el-input_inner {

　　  color: red;

　　}

　　>>> .el-input_inner {

  　　color: red;

　　}

</style>

注意：/deep/  ::v-deep 只能在像 less , sass 等css预处理器中使用，在原生css中使用无效，所以原生css当中应使用 >>>