为 v-html 添加 CSS 样式答案

【问题标题】：Add CSS style to v-html为 v-html 添加 CSS 样式
【发布时间】：2020-07-30 18:17:44
【问题描述】：

我想在v-html 中为 HTML 代码添加样式。我尝试了几种解决方案，但没有任何功能:(

这是我的代码：

模板：

<div
  class="para"
  v-html="value" 
/>

脚本：

export default {
  data () {
    return {
      value : "<h2> TITLE </h2> <p> PARA </p>"
    }
  },
}

风格：

.para >>> h2 {
  color: blue;
}

.para >>> p {
  color: red;
}

提前致谢！

【问题讨论】：

我不太确定 >>> 是否是一个有效的 css 选择器组合器。您的意思是使用> 吗？
在其他主题上，他们每次都使用 >>> 案例medium.com/@brockreece/scoped-styles-with-v-html-c0f6d2dc5d8e
您是否在样式标签中添加了 scoped 属性？

【解决方案1】：

如果您在没有 SASS 的情况下使用 scoped 样式，请以这种方式使用 >>> 组合器：

>>> .para > h2 {
  color: blue;
}

>>> .para > p {
  color: red;
}

如果您使用scoped 样式与 SASS，请使用::v-deep 组合器：

::v-deep .para > h2 {
  color: blue;
}

::v-deep .para > p {
  color: red;
}

否则：

.para > h2 {
  color: blue;
}

.para > p {
  color: red;
}

这是demo

【讨论】：