vue 使用v-html绑定时,内部元素不会继承外部css的解决

2019-06-26  本文已影响0人  果汁果肉

vue 使用v-html绑定时,内部元素不会继承外部css的解决方案

代码:

<div class="content article-html-content" v-html="articleDetailData.details"></div>

样式:

<style scoped>
  .article-html-content p {
    font-size: 16px;
  }
</style>

这样样式不起作用

原因:
scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css

解决方案:

<style>
  .article-html-content p {
    font-size: 16px;
  }
</style>

参考:
博客

上一篇 下一篇

猜你喜欢

热点阅读