情景描述:

               在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

 

Logo

前往低代码交流专区

更多推荐