在学习 vue 项目的时候发现，v-html 里面包含的标签无法设置样式
<template>
<div class="content" v-html='msg'></div>
</template>
<script>
export default{
data(){
return {
msg: "<p>我是 v-html 里面的 p 标签</p>"
}
}
}
</script>
<style lang="scss" scoped>
.content {
p {
color: blue;
}
}
</style>
最后发现两种解决办法
- 这里要是使用 /deep/ 深层作用选择器，才能用 scss
<style lang="scss" scoped>
.content {
/deep/ p {
color: pink;
}
}
</style>
- 这里要是使用 >>> 深层作用选择器，只能用 css ，不能用 scss
<style scoped>
.content >>> p {
color: pink;
}
</style>
网友评论