在最近的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>Vue为v-html中标签添加CSS样式
原文地址：https://www.cnblogs.com/yunspider/p/9623655.html