Vue里给v-html元素添加样式

<template>
  <div class="hello">
    <section>
      <h2 class="title">{{news.title}}</h2>
      <p class="news-time">{{news.datetime}}</p>
      <div class="con" v-html="news.dec">
      </div>
      <button class="back" @click="goBack()">返回列表</button>
    </section>
  </div>
</template>

当我们使用v-html渲染页面，使用下面这种方式去修改样式并没有效果，

<style scoped  lang="less">
.con{
  p {
    font-size: 14px;
    line-height: 28px;
    text-align: left;
    color: rgb(238, 238, 238);
    color: #585858;
    text-indent: 2em;
  }
}
</style>

解决方案：

1、scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.解决的话把scoped属性去掉就行了

2、而如果在组件中使用了v-html，要为news.dec中的标签添加CSS样式，我们需要在写样式的时候添加>>>：

<style scoped>
>>> p {
  font-size: 14px;
  line-height: 28px;
  text-align: left;
  color: rgb(238, 238, 238);
  color: #585858;
  text-indent: 2em;
}
</style>

这样编译的时候这样，编译时以上CSS才会被编译为

[data-v-146ebe36] p {
    font-size: 14px;
    line-height: 28px;
    text-align: left;
    color: #eee;
    color: #585858;
    text-indent: 2em;
}

请使用手机"扫一扫"x