vue 修改富文本的样式 使用 deep selectors >>>

情景描述：

               在vue中，后台编辑富文本信息通过接口返回到前端页面中，为了样式的统一和美观，我们可以在

               一定程度上设置富文本的样式，那怎么去设置呢？

               

               假设我们在vue中写了一个div  ,  class 是 abc , 然后将富文本test渲染到div 中，

                我们在样式中设置： .abc p { color: red; }   你会发现一点作用都没有是不是？

<div v-html="test" class="abc">

</div>


test="<p>我是富文本信息</p>"

                其实最好的方法是使用 deep selectors ,  也就是这个符号： >>>

                 .abc >>>p { color:red; }  , 这样就可以了；

               有关deep selectors 的信息，请自行查找：

               参考：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors