Vue3中给v-html创建的DOM添加样式

通过 v-html 创建的 DOM 内容不会被作用域样式影响

深度选择器可以解决这个问题:

处于 scoped 样式中的选择器如果想要做更“深度”的选择,也即:影响到子组件,可以使用 :deep() 这个伪类:

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

上面的代码会被编译成:

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

参考文档

Tags : Tags

Leave a Comment

Back to Top