將 CSS 樣式添加到 v-html

Question

我想在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;
}

提前致謝 ！

Answer 1

如果您使用沒有 SASS 的scoped樣式，請以這種方式使用>>>組合器：

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

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

如果您使用SASS 的scoped樣式，請使用::v-deep組合器：

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

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

否則：

.para > h2 {
  color: blue;
}

.para > p {
  color: red;
}

這是一個演示