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
Detailed explanation of MySQL subqueries (nested queries), join tables, and combined queries
1. Subquery MySQL 4.1 and above support subquerie...
Detailed explanation of primary keys and transactions in MySQL
Table of contents 1. Comments on MySQL primary ke...
Detailed explanation of Nginx+Tomcat load balancing cluster installation and configuration case
Table of contents Preface 1. Nginx+Tomcat 2. Conf...
Summary of Linux ps and pstree command knowledge points
The ps command in Linux is the abbreviation of Pr...
MySQL foreign key setting method example
1. Foreign key setting method 1. In MySQL, in ord...
Learning Vue instructions
Table of contents 1. v-text (v-instruction name =...
Web front-end skills summary (personal practical experience)
1. Today, when I was making a page, I encountered ...
Detailed steps for installing Tomcat, MySQL and Redis with Docker
Table of contents Install Tomcat with Docker Use ...
Detailed explanation of Docker Compose deployment and basic usage
1. Docker Compose Overview Compose is a tool for ...
Solution to the system abnormality (unable to boot) caused by upgrading glibc in Centos7
Table of contents Cause of the problem: Solution:...
MySQL optimization: how to write high-quality SQL statements
Preface There are a lot of information and method...
Install Zookeeper under Docker (standalone and cluster)
After starting Docker, let's take a look at t...
JavaScript canvas to achieve raindrop effects
This article example shares the specific code of ...
Research on the Input Button Function of Type File
<br />When uploading on some websites, a [Se...
Teach you how to build Redis cluster mode and sentinel mode with docker in 5 minutes
Table of contents 1. Preparation Pull the redis i...