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

882 阅读1分钟

情景描述:

在vue中,后台编辑富文本信息通过接口返回到前端页面中,为了样式的统一和美观,我们可以在一定程度上设置富文本的样式,那怎么去设置呢?

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

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

<div v-html="abc>

</div>

其实最好的方法是使用 deep selectors ,  也就是这个符号: >>>
.abc >>>p { color:red; }  , 这样就可以了;

有关deep selectors 的信息,请自行查找:

参考:vue-loader.vuejs.org/guide/scope…