如果要在scope作用域下修改外部样式，这里就需要穿透（深度）选择器
一、CSS使用>>>
<style scoped>
.list >>> .item {
padding: 8px 0;
}
</style>
二、less使用 /deep/
<style lang="less" scoped>
/deep/ .list .item {
padding: 8px 0;
}
</style>
三、scss使用::v-deep
<style lang="scss" scoped>
::v-deep .list .item {
padding: 8px 0;
}
</style>
或
<style lang="scss" scoped>
.zh-control {
&::v-deep {
.el-menu {
border-right: 0;
}
.el-menu-item.is-active {
border-left: 3px solid #1887FB;
background-color: #EBF4FE !important;
}
}
}
</style>
四、使用:deep()
这是vue3.x中的特性，v3.cn.vuejs.org/api/sfc-sty…
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
上面的代码会被编译成：
.a[data-v-f3f3eg9] .b {
/* ... */
}
参考链接：
