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

一、问题描述

为了保证样式只应用于当前组件，我们在<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>
复制代码

二、解决方案

1、通过全部样式

使用全局样式能够将样式作用于全局的全部元素

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

2、使用深度作用选择器

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

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

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

转载于:https://juejin.im/post/5c95f2dee51d456a2b43d9fc