vue 关于深度选择器(>>> | /deep/) ,一般用于修改第三方样式的时候会使用到.

示例: 比如修改Element el-drawer 控件超过范围实现上下滑动
如果不使用深度选择器的话实现:

  1. 这里没有声明scoped ,这里的修改是作用于所有的el-drawer控件
//这里没有声明scoped ,这里的修改是作用于所有的el-drawer控件
<style lang="scss" >
.el-drawer{
    overflow: scroll
 	}
  </style>
  1. 这里是作用于当前页面的.el-drawer,就要使用到深度选择器 /deep/

使用深度选择器:

//这里是作用于当前页面的.el-drawer,就要使用到深度选择器 /deep/
<style lang="scss" scoped>
 /deep/ .el-drawer{
    overflow: scroll
  }
  </style>
  1. 关于>>> | /deep/的区别
    官方说>>>在scss中会有问题,建议使用/deep/
Logo

前往低代码交流专区

更多推荐