web前端入門到實戰：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);
}
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端專案實戰教學影片，PDF）

生效的類名以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);
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端專案實戰教學影片，PDF）

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