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/来代替

如果觉得我的文章对你有用,请随意赞赏