修改组件样式不生效（vue深度选择器）

样式不生效可能的情况

1. 没有选中，可以使用vue提供的深度选择器

   如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

   <style scoped>
   .a >>> .b { /* ... */ }
   </style>
   

   上述代码将会编译成：

   .a[data-v-f3f3eg9] .b { /* ... */ }
   

   有些像 Sass 之类的预处理器无法正确解析 >>>。深度选择器还有以下几种写法

   1. >>>   这种写法在浏览器兼容性问题，所以一般也不推荐使用

   2. /deep/   这种写法不支持sass预处理器，也不推荐使用

   3. ::v-deep  vue3弃用，也不推荐使用

   4. :deep(<inner-selector>)  推荐

2. 如果使用了深度选择器还没有生效可以参考下面的方法：

   有一些element组件的弹框是js生成的放在body里的，直接在当前.vue文件里面更改不生效，需要在全局样式里面更改才生效

   💡 这样会污染全局的样式，一般组件会给你提供一个属性，给弹窗加一个类。如el-tooltip 组件