样式不生效可能的情况
-
没有选中,可以使用vue提供的深度选择器
如果你希望
scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用>>>
操作符:<style scoped> .a >>> .b { /* ... */ } </style>
上述代码将会编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
有些像 Sass 之类的预处理器无法正确解析
>>>
。深度选择器还有以下几种写法-
>>> 这种写法在浏览器兼容性问题,所以一般也不推荐使用
-
/deep/ 这种写法不支持sass预处理器,也不推荐使用
- ::v-deep vue3弃用,也不推荐使用
-
:deep(<inner-selector>) 推荐
-
-
如果使用了深度选择器还没有生效可以参考下面的方法:
有一些
element
组件的弹框是js
生成的放在body
里的,直接在当前.vue
文件里面更改不生效,需要在全局样式里面更改才生效💡 这样会污染全局的样式,一般组件会给你提供一个属性,给弹窗加一个类。如
el-tooltip
组件