html元素樣式覆蓋問題怎么解決

這篇文章主要介紹“html元素樣式覆蓋問題怎么解決”，在日常操作中，相信很多人在html元素樣式覆蓋問題怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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屬性中的類名書寫關系么有關系

到此，關于“html元素樣式覆蓋問題怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！