Add CSS style to v-html

问题

I would like to add style to HTML code in a v-html. I tried several solutions but nothing functional :(

Here is my code:

Template :

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

Script :

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

Style :

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

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

Thanks in advance !

回答1:

If you're using scoped style without SASS, use the >>> combinator this way:

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

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

If you're using scoped style with SASS, use the ::v-deep combinator:

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

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

Otherwise:

.para > h2 {
  color: blue;
}

.para > p {
  color: red;
}

Here is a demo

来源：https://stackoverflow.com/questions/61268364/add-css-style-to-v-html