在使用vue组件进行项目开发时,有时候会想改一下第三方组件的样式。如果style加了scoped的话,我们发现新加的样式往往是不生效的,去掉scoped会生效。但是我们并不想因为一个小修改而去掉scoped,这个时候,可以使用'>>>'操作符。
<style scoped>
.parent >>> .child { /* ... */ }
</style>
编译结果为:
.parent[data-v-f3f3eg9] .child {
/* ... */
}
less和sass不支持>>>,可以使用/deep/来替换。
.parent /deep/ .child { /* ... */ }