vue修改v-html指令中的元素css样式

在vue中，我们的style样式都会加上一个scoped属性，而scoped属性是不会作用在v-html的内部的，可以通过官网的这段话：

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略。官网地址

官网也提供了解决方法，下面看一下这几种解决办法

使用CSS Modules

移步至官方文档：https://vue-loader.vuejs.org/en/features/css-modules.html

在scoped的CSS中

在CSS中，表示没有使用sass或者scss等预编译处理器。我们需要用到深度选择器：>>>，通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值

#article-content-main-box>>>img{
  width: 30rem;
  height: 10rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 1rem #e2dbdb;
}

放在全局style中

<style>
#article-content-main-box img{
  width: 30rem;
  height: 10rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 1rem #e2dbdb;
}
</style>

注意此时的style并没有scoped属性，可以作用。这个方法不建议使用，可能会改变布局。

scss中

<style scoped>
.content /deep/ img{width:100%;height:auto;margin:.5rem auto;}
.content /deep/ .contentimg{width:100%;height:auto;margin:.5rem auto;}
</style>

如果vue项目使用less或者sass的时候，>>>可能会失效，可以使用/deep/来代替