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

This article mainly introduces "how to understand the priority of the same attribute and different value of the browser in the different kinds of CSS". In the daily operation, it is believed that many people have doubts about how to understand the priority of the same attribute and different value of the same attribute in the different kind of CSS. The editor consulted all kinds of materials and sorted out a simple and useful operation method. I hope it will be helpful for you to answer the question of "how to understand the browser for the priority of the same attribute and different value in different kinds of CSS"! Next, please follow the editor to study!

When I make some Mini Program, I find that when two different classes in a tag set different values for the same attribute, the characteristics of the final attribute value:

The above sentence is a mouthful. Use examples to illustrate everything.

Csstest.html:

The code is as follows:

CSStest

Aaaaaaa

Bbbbbbb

Ccccccc

Ddddddd

Eeeeeee

Fffffff

1.css

The code is as follows:

.a {

Cursor: pointer

Font-size: 1em

}

.b {

Cursor: move

Font-size: 2em

}

.c {

Cursor: crosshair

Font-size: 3em

}

.d {

Cursor: help

Font-size: 4em! important

}

2.css

The code is as follows:

.e {

Cursor: progress

Font-size: 5em

}

Finally, when the browser examines the element, it is found that:

1. In the first and second paragraphs, the mouse style is move, the font size is 2em, and only class b plays a role.

Note: regardless of the order of the classes in the class attribute in the tag, the final value of the same attribute takes the last one in the declared position in the css file.

2, in the third and fourth paragraph, the mouse style is progress, the font size is 5em, only class e plays a role, and when loading the html page, first load 1.css, and then load 2.css.

Note: regardless of the order of the classes in the class attribute in the tag, the final same attribute value takes the last one in the declared position in the last loaded css file.

3. In the fifth and sixth paragraph, the mouse style is progress, the font size is 4em, class e works, and class d works as a result of setting! important.

Then: set! the value of important will be selected first.

Later, I tested it again and added the font-size in e! important, the font size will change to 5em, then for all set! important property values, follow the above rule.

At this point, the study on "how to understand the priority of browsers for different values of the same attribute in different CSS" 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.