vue 修改富文本的样式 使用 deep selectors >>>
情景描述:在vue中,后台编辑富文本信息通过接口返回到前端页面中,为了样式的统一和美观,我们可以在一定程度上设置富文本的样式,那怎么去设置呢?假设我们在vue中写了一个div , class 是 abc , 然后将富文本test渲染到div 中,...
·
情景描述:
在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
更多推荐
已为社区贡献11条内容
所有评论(0)