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:

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 explanation of the 8 attribute values of the background attribute (interview question)

>>: Detailed steps to use Arthas in a Docker container

30 minutes to give you a comprehensive understanding of React Hooks

Sharing experience on the priority of CSS style loading

30 minutes to give you a comprehensive understanding of React Hooks

Simple steps to configure Nginx reverse proxy with SSL

web.config (IIS) and .htaccess (Apache) configuration

Analysis of the process of deploying nGrinder performance testing platform with Docker

A brief talk about React Router's history

HTML table_Powernode Java Academy

Detailed explanation and summary of the use of Linux scheduled task Crontab command

Introduction to HTML DOM_PowerNode Java Academy

Detailed explanation of Vue's simple store

Img semi-transparent processing Img plus semi-transparent background implementation ideas and code

Recommend

Install mysql 5.6 from yum source in centos7.4 system

MySQL uses aggregate functions to query a single table

Implementation of vue+drf+third-party sliding verification code access

Steps to transfer files and folders between two Linux servers

Common naming rules for CSS classes and ids

Optimization analysis of Limit query in MySQL optimization techniques

WeChat applet realizes the effect of swiping left to delete list items

Solution to the problem that the page is blank when opening the page with source file in IE7

Pure HTML+CSS to achieve Element loading effect

Detailed explanation of the usage of Object.assign() in ES6

Vuex implements simple shopping cart function

Detailed explanation of the execution differences between count(1), count(*) and count(column name)

CentOS7 uses rpm to install MySQL 5.7 tutorial diagram

Dynamic starry sky background implemented with CSS3

JavaScript implements circular progress bar effect