html元素有多個類名時，樣式覆蓋問題

<div class="carousel-item carousel-item-active">

                </div>

有這樣的代碼段

.carousel-item-active {
    width: 39.722vw;
    height: 21.667vw;
    border-radius: 2.083vw;
    border: 0.833vw solid rgba(72, 155, 97, 1);
}

.carousel-item {
    width: 30.556vw;
    height: 16.667vw;
    background: rgba(255, 255, 255, 1);
    border-radius: 1.389vw;
    border: 0.278vw solid rgba(214, 214, 214, 1);
}

生效的類名以css文件中最後定義的類的樣式爲準

比如上面這段代碼

生效的樣式是carousel-item的樣式

然後在css樣式裏面調整兩個樣式的順序

.carousel-item {
    width: 30.556vw;
    height: 16.667vw;
    background: rgba(255, 255, 255, 1);
    border-radius: 1.389vw;
    border: 0.278vw solid rgba(214, 214, 214, 1);
}

.carousel-item-active {
    width: 39.722vw;
    height: 21.667vw;
    border-radius: 2.083vw;
    border: 0.833vw solid rgba(72, 155, 97, 1);
}

不修改html元素

然後此時生效的樣式是carousel-item-active

也就是

 width: 39.722vw;
    height: 21.667vw;
    border-radius: 2.083vw;
    border: 0.833vw solid rgba(72, 155, 97, 1);

總結：當某個元素綁定多個類名，且樣式類中有多個相同屬性時，根據編寫的先後順序生效，寫在前面的會被後面覆蓋，而與html中class屬性中的類名書寫關係麼有關係