卡片组件内部实现逻辑是这样的:
<el-carousel>
<el-carousel__container>
<el-carousel__item></el-carousel__item>
</el-carousel__container>
<el-carousel__indicators></el-carousel__indicators>
</el-carousel>
我们能够修改的只有item
,container
中的布局用普通的css语法是无法修改的。
所以el-carousel加上/deep/就可以修改里面的样式了
.el-carousel /deep/ .el-carousel__container {
height: 200px;
}
/deep/ 深度选择器
在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,就不会影响到子组件的样式。
/deep/与>>>等效