scss中深度选择器/deep/的基本用法

在vue项目开发中有可能会碰到写在scss中样式不会执行，这是我们会用到深度选择器/deep/，下面web建站小编给大家详细介绍一下具体实现代码！

deep正确写法：

/deep/的用法：

复制代码<style scoped>
.menu{
  /deep/ .li { 
    //....
  }
} 
</style>
1
2
3
4
5
6
7

::v-deep的用法：

复制代码<style scoped>
.menu{
  ::v-deep .li { 
    //....
  }
} 
</style>
1
2
3
4
5
6
7

PS：如果/deep/在vue-cli3编译时，出现报错或者警告可以使用::v-deep。

:deep()的用法：

复制代码<style>
.menu{
  :deep(.li){
    //....
  }
}
  
</style>
1
2
3
4
5
6
7
8

PS： :deep在vue3中项目中使用~

/deep/深度选择器错误写法：

复制代码<style scoped>
/deep/ .el-menu .el-menu-item {
  background-color: #000!important;
}
</style>
1
2
3
4
5

PS：>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/,因此报错*/