方案:在class前面加上::v-deep以及在style标签加上scoped
1、::v-deep
进行样式穿透,既适用于CSS,适用于Sass、Less等预处理器,在vue-cli3以上版本创建的vue项目才也会被支持。
<style scoped>
::v-deep .act-view-radio{
background: #f9ebc6;
}
</style>
2、:deep
进行样式穿透,既适用于CSS,适用于Sass、Less等预处理器,在某些版本的vue中不支持::v-deep,就可使用它进行替代:
:deep .act-view-radio{
background: #f9ebc6;
}
3、 /deep/
进行样式穿透,既适用于CSS,适用于Sass、Less等预处理器,但问题是在vue-cli3以上版本创建的vue项目不再被支持。
/deep/ .act-view-radio{
background: #f9ebc6;
}
4、>>>
进行样式穿透,但是只适用于原始CSS,不适用于 Sass、Less等预处理器。
>>> .act-view-radio{
background: #f9ebc6;
}