一、问题描述
为了保证样式只应用于当前组件，我们在<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>
