v-html 中单页面的css不生效

在单页面组件里面,scoped的样式不会应用在v-html内部,因为那部分HTML没有被Vue的模板编译器处理

解决方法

1. 去掉scoped (不建议使用,会改变布局,导致组件之前的样式冲突)
2. 通过 >>> 深度选择器,在scoped属性的情况下,穿透scoped,修改其他组件的值,但是在vue项目中,使用less,或者sass的时候,>>>可能会失效,…这个看命
3. 使用 /deep/

<style lang="scss" scoped>
.article /deep/ table tbody,.article /deep/ table tbody tr ,.article /deep/ table tbody td {
  border: 1px solid #333;
}
/deep/ ol{list-style:decimal; }
/deep/ ul{list-style:disc; }
</style>

参考