Sharing experience on the priority of CSS style loading
|
During the project development yesterday, I encountered a problem with style loading priority. The class is defined and is recognized during the initial loading of the page. A moment after the loading is completed, the style seems to be rewritten and the defined margin-bottom no longer works. Without this style, the controls are crammed together. During the test, FF and Chrome both work fine, but IE8 has a problem. However, using the IE developer tool, you can see that margin-bottom is recognized and has not been redefined. The problem is rather weird. This page is not an ordinary structure. The page content is generated asynchronously, rather than an ordinary page with various elements already written. As for what redefines the data at the moment of loading, the reason has not been found yet. The phenomenon is that if you click on any of the crowded form elements, all the forms in the module where it is located will load the margin-bottom style and will no longer be crowded together. Or use IE developer tools, first uncheck the box in front of margin-bottom, then select it, so that all form elements on the page that do not recognize margin-bottom will load this style normally. But this is definitely not the solution to the problem. Customers must not be allowed to see this problem. The UI is the part that can impress users the most, but it is also the part that is most likely to irritate users. Then I tried several methods, such as writing a style definition for margin-bottom instead of adding it to other definitions, but it didn't work; Adding !important, which is a high priority method, doesn't work either; Writing style directly has a lower priority than !important, and there is too much code redundancy and more disadvantages, so it is not acceptable. Then I tried a method, the script method, which worked. The code is as follows: Copy code The code is as follows:<script type="text/javascript"> document.getElementByClassName("mar_b_10").style.margin-bottom="10px"; </script> In fact, it is just a declaration again. The content is the same as the class, and the browser can recognize it. The style object controlled by JS, document.getElementByClassName("mar_b_10").style.margin-bottom="10px"; Generally, the style controlled by JS has a higher priority, because DOM operations are often performed after the DOM tree is loaded. After the DOM tree was loaded, I wrote js to redefine it. There was no other overwriting of the style definition, and the result was quite satisfactory. In general: [1 important flag] > [4 special flags] > declaration order !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 the style object, then id > class > tag. In addition, the styles that appear after the same level styles in the order of declaration have high priority. |
>>: Detailed steps to use Arthas in a Docker container
Recommend
How to insert a link in html
Each web page has an address, identified by a URL...
How to query data within a certain period of time with Vue front-end and Django back-end
Preface During the development process, you will ...
linux No space left on device 500 error caused by inode fullness
What is an inode? To understand inode, we must st...
Simply master the use of horizontal line annotations and code comments in HTML
Horizontal Line Use the <hr /> tag to draw ...
Mysql implements master-slave configuration and multi-master-multi-slave configuration
What we are simulating now is a master-slave syst...
The correct way to install MySQL using yum on Alibaba Cloud CentOS 7 (recommended)
yum quick install mysql Add yum repository rpm -U...
Nginx reverse proxy and load balancing practice
Reverse Proxy Reverse proxy refers to receiving t...
Detailed explanation of JavaScript implementation of hash table
Table of contents 1. Hash table principle 2. The ...
Implementation steps for docker deployment lnmp-wordpress
Table of contents 1. Experimental Environment 2. ...
Hyperlink icon specifications: improve article readability
1. What is the hyperlink icon specification ?<...
Detailed explanation of location and rewrite usage in nginx
1. Summary of location usage Location can locate ...
Solution to the paging error problem of MySQL one-to-many association query
The query data in the xml price inquiry contains ...
Detailed introduction to nobody user and nologin in Unix/Linux system
What is the nobody user in Unix/Linux systems? 1....
js realizes the function of clicking to switch cards
This article example shares the specific code of ...
Detailed steps for configuring Tomcat server in IDEA 2020
The steps for configuring Tomcat in IDEA 2020 are...