Vue 使用篇(三)：scoped属性的style样式如何应用于其子组件中

1、问题描述

为了保证样式只应用于当前组件，咱们在<style>标签上添加scoped属性，然而若是咱们运用了v-html设置页面的内容，则组件的样式没法渗透到v-html设置的内容中。

<template>
  <div>
    <div class='demo' v-html="htmlCode"></div>
    <p>this is main content</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      htmlCode: '<p>this is v-html content</p>'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  /* 对v-html中的内容无效 */
  color: red;
}
</style>
复制代码

2、解决方案

一、经过所有样式

使用全局样式可以将样式做用于全局的所有元素

<style>
p {
  color: red;
}
复制代码

二、使用深度做用选择器

可是若是我不想让这些组件的样式“污染”到了全局的样式，只想将这些样式做用于这个组件内部，那么为了让scoped的样式可以做用得“更深”，从而影响子组件，此时能够使用深度做用选择器，即便用 >>> 操做符

<style scoped>
/* 对v-html中的内容无效 */
p {
  color: red;
}

/* 做用于子组件中 */
.demo >>> p{ 
  color: blue;
}
</style>
复制代码