Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to solve the html element style coverage problem". In daily operation, I believe many people have doubts about how to solve the html element style coverage problem. Xiaobian consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how to solve the html element style coverage problem"! Next, please follow the small series to learn together!

There's this code segment

。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）;

}

The effective class name is based on the style of the last class defined in the css file

For example, this code above

The styles in effect are carousel-item styles

Then adjust the order of the two styles in the CSS style

。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）;

}

Do not modify html elements

Then the style in effect is carousel-item-active

that is

width: 39.722vw;

height: 21.667vw;

border-radius: 2.083vw;

border: 0.833vw solid rgba（72, 155, 97, 1）;

Summary: When an element is bound to multiple class names, and there are multiple attributes in the style class, it takes effect according to the order of writing. What is written in the front will be overwritten later, and it has nothing to do with the class name writing relationship in the class attribute in html.

At this point, the study of "how to solve the html element style overlay problem" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.