vue.js - vue在使用html绑定的时候，里面的元素不会继承外部的CSS？

问题描述

问 题

问题描述

想用vue绑定富文本生成的HTML内容，但是发现CSS样式根本不生效，选择器没起作用，还没有深入了解绑定的时候dom是怎么重绘的，是不是还有其他的替代方案？

代码片段

<template>
<div class="answertext">
  <blockquote><p>这个是原始的标签！</p></blockquote>
  {{{ answer.text }}}
</div>
</template>

<style>
.answertext blockquote {
  border-left: 6px solid #ddd;
  padding: 5px 0 5px 10px;
  margin: 15px 0 15px 15px;
}
</style>

问题详情

以下是chrome检查生成的HTML代码，可以注意到原始的标签和生成的标签是不同的，原始html模板里的标签都有_v-80e9c926这么个类似版本号的东西，而我绑定的标签是没有的。

以下是效果图

这是为什么呢？--。

解决方案

scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.

解决的话把scoped属性去掉就行了

这篇关于vue.js - vue在使用html绑定的时候，里面的元素不会继承外部的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！