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

This article mainly explains "how to use the priority of css style loading". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the priority of css style loading".

The class is defined, which is recognized during the initial loading of the page, and immediately after loading, the style seems to have been rewritten, and the defined margin-bottom no longer works. Controls are huddled together because they don't have this style.

Both FF and Chrome were OK in the test, and there was a problem with IE8, but you can see that the margin-bottom was identified and not redefined with the IE developer tool.

The question is weird.

This page is not an ordinary structure, the content of the page is generated asynchronously, not a normal page that has written various elements before. As for what is redefined at the moment of loading, the reason has not been found yet. The phenomenon is that if you click on one of the huddled form elements, all forms in its module will be loaded with margin-bottom style and will no longer be squeezed together. Or use the IE developer tool, first click the tick in front of the margin-bottom to not select, and then click to select, so that all the form elements on the page that do not recognize margin-bottom will load the style normally.

But this is certainly not the solution to the problem, can not let customers see the problem, UI is the most moving part, but also the most likely to infuriate users.

Then I tried several ways to write a style definition margin-bottom instead of along with other definitions. No.

Add! important can't even be a high priority.

Writing style directly is not as priority as! important, and too much code redundancy, more drawbacks, no

Then try a method, script's method, feasible, the code is as follows:

The code is as follows:

Document.getElementByClassName ("mar_b_10") style.margin-bottom= "10px"

In fact, it is stated once again that the browser can recognize the same content as class. The style object controlled by JS, document.getElementByClassName ("mar_b_10"). Style.margin-bottom= "10px"; in general, the style controlled by JS takes precedence, because the DOM operation is often done after the DOM tree has been loaded. After the DOM tree was loaded, I wrote js to redefine it, so there was nothing else to overwrite this style definition, and the result was satisfactory.

In general:

[1 important symbol] > [4 special marks] > order of declaration

! important > [inline style > ID selector > Class, attribute, pseudo-class selector > element tag, pseudo-element selector]

Using! important can change the priority to the highest, followed by style objects, followed by id > class > tag, and in addition, styles that appear after sibling styles are declared have high priority.

Thank you for reading, the above is the content of "how to use the priority of css style loading". After the study of this article, I believe you have a deeper understanding of how to use the priority of css style loading, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.