element卡片组件修改css(el-carousel)

卡片组件内部实现逻辑是这样的:

<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/与>>>等效

参考：el-carousel中放图片 - ticlab - 博客园

           [vue]css的/deep/及>>>用法 - 爱情博物馆