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

This article mainly introduces "the introduction of the concept and characteristics of CSS cascading". In the daily operation, I believe that many people have doubts about the concept and characteristics of CSS cascading. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "introduction to the concept and characteristics of CSS cascading". Next, please follow the editor to study!

Concept of CSS cascading:

There are multiple selectors or one selector to select multiple styles in one or more tags. If multiple selectors are assigned to the same attribute of one or more tags, the scope of the style overlap.

The embodiment of CSS cascading:

1. Style has no conflict

In the above code, there is no conflict in the style code, and all styles in the two selectors are superimposed on the element div, and div ends up rendering a red container with a width and height of 100px.

two。 There are conflicts in styles.

When the style conflicts and the same level is not affected by priority

In the above code, at the same level (the same element, the same name of the class definition selector), the style code conflicts, and the same width attribute appears in the two selectors, then the last style in the CSS code prevails, and div finally presents a container with a width of 200px, a height of 100px, and a red color.

Styles conflict, and when different levels are affected by priority (weight), CSS specifies the priority of the basic selector from low to high as follows: element (tag) style < category (class) style < ID style < inline style

2-1: category (class) style VS element (tag) style

In the above code, the class style takes precedence over the element style, and even if the width set by div is written later, you end up rendering a container with a red width:200px,height:100px; background.

2-2:ID style VS Category (class) style

In the above code, the ID style takes precedence over the class style, resulting in a container with a yellow width:200px,height:100px; background.

2-3: inline style VS ID style

In the above code, the CSS inline style takes precedence over the ID style, and div ends up rendering a container with a width of 200px, a height of 100px, and a pink background.

At this point, the study of "introduction to the concept and features of CSS cascading" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.