在學(xué)習(xí) vue 項(xiàng)目的時(shí)候發(fā)現(xiàn)，v-html 里面包含的標(biāo)簽無法設(shè)置樣式

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

最后發(fā)現(xiàn)兩種解決辦法

• 這里要是使用 /deep/ 深層作用選擇器，才能用 scss

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

• 這里要是使用 >>> 深層作用選擇器，只能用 css ，不能用 scss

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