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

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

作者: 果汁果肉 | 来源:发表于2019-06-26 19:01 被阅读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>
    

    参考:
    博客

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/exehcctx.html