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的解决
vue 使用v-html绑定时，内部元素不会继承外部css的解决方案代码：样式：这样样式不起作用原因：sc...
CSS知识
CSS知识标签（空格分隔）： CSS布局图片垂直居中于元素外部使用display:table；内部使用dis...
什么是css继承？哪些属性能继承，哪些不能？
CSS继承可定义为特定的css属性向下传递到子孙元素，就是指被包在内部的标签将拥有外部标签的样式，即子元素可以继承...
CSS
1.css有几种编写的方式？内联样式：使用style属性声明在元素中内部样式: 外部样式：引入方式使用的规...
css基础1
使用css的方式使用css的方式有3种，样式的优先权为：行内样式>内部样式>外部样式行内样式内部样式外部样式行...
内部类
内部类：可以继承，可以实现接口内部类，可以使用外部成员，包括私有外部类，使用内部类成员，必须建立内部类...
九、Vue中的CSS
Scoped CSS 限定了范围的css 无法影响外部元素外部样式一般不影响内部可以通过/deep/或>>>穿...
CSS基础理解
CSS基础理解一、CSS 加载方式有几种 CSS可以通过使用外部样式表、内部样式表、内联样式来使用。外部样式表...
Vue使用v-html输出的样式无法更改
Vue渲染到html元素的数据时使用v-html输出解析下面json的数据在vue中输出label或title...
vue 给富文本标签添加样式
给vue项目中v-html的内容添加样式 1.使用css 深度选择器 .content >>> img { max...