Vue为v-html中标签添加CSS样式

在学习 vue 项目的时候发现，v-html 里面包含的标签无法设置样式

<template>
    <div class="content" v-html='msg'></div>
</template>
 
<script>
export default{
    data(){
        return {
            msg: "<p>我是 v-html 里面的 p 标签</p>"
        }
    }
}
</script>
 
<style lang="scss" scoped>
.content {
  p {
     color: blue;
  }
}
</style>

最后发现两种解决办法

• 这里要是使用 /deep/ 深层作用选择器，才能用 scss

<style lang="scss" scoped>
.content {
  /deep/ p {
     color: pink;
  }
}
</style>

• 这里要是使用 >>> 深层作用选择器，只能用 css ，不能用 scss

<style scoped>
.content >>> p {
     color: pink;
}
</style>