🧪

vue3深度选择器写法

notion image
 
开发中修改第三方组件样式很常见,但是由于scoped属性的样式隔离,可能需要去掉scoped或者另起一个样式。这些做法有副作用(组件样式污染,缺乏优雅),在css预处理器中使用样式渗透来生效。
我们可以使用 >>> 或者 /deep/ 来解决这个问题:
notion image
 
notion image
 

vue2 的sass深度选择器

notion image
 

vue2的css深度选择器

原生css: >>> .el-card__header
Sass/Scss:::v-deep .el-card__header
Less:/deep/ .el-card__header

vue3的css深度选择器

Sass/Scss/Less原生css都可以使用::deep() { /* styles */ }::deep() { /* styles */ }