在最近的vue项目中遇到的问题：v-html渲染的富文本，无法在样式表中修改样式；
<template>
<div class="msgHtmlBox" v-html=‘msgHtml‘></div>
</template>
<script>
export default{
data(){
return {
msgHtml: "<p>https://www.cnblogs.com/yunspider/</p>"
}
}
}
</script>
<style scoped>
.msgHtmlBox p{
color: blue;
}
</style>
这是为什么呢？原因很简单：如果p标签在template中先写出来，那么在<style></style>标签中是可以修改其样式的；
这应该是vue编译的规范，未在虚拟dom中渲染的元素无法修改样式；
解决方案1：在updated生命周期函数中，js动态配置样式，代码如下
updated() {
$(‘.msgHtmlBox‘).find(‘p‘).css(‘color‘, ‘blue‘);
},
解决方案2：去掉style标签中的scoped属性
scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.
解决方案3：写样式的时候添加>>>
<style scoped>
.msgHtmlBox >>> p{
color: blue;
}
</style>
原文：https://www.cnblogs.com/yunspider/p/9623655.html