Discussion on CSS style priority and cascading order

In general :
[1 important flag] > [4 special flags] > declaration order
!important > [ id > class > tag ]
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.

Let’s take a look at this weird thing!important

Copy code

The code is as follows:

Except for IE6, other browsers will display the background in red. This is exactly the role of !important, which means that as long as I am here, I am the most important. Nothing can replace me. No matter what you see, we are all the same! Add an additional English word "important"? Very vivid and appropriate. IE6 will display a blue background here. It’s not that IE6 doesn’t support !important, but it will overwrite the previous ones according to the order of style declarations. At this time, it no longer recognizes !important and doesn’t recognize it at all. This is one of the most popular IE6 hacks. If you write it like this, the background will be displayed normally in red:

Copy code

The code is as follows:

Let's look at the 4-bit special flag [0.0.0.0]
From left to right, each time a position is given +1, the previous paragraph has an indisputable overwhelming advantage over the next paragraph. No matter how large the value of the latter digit is, it can never exceed the value of the previous digit, which is 1.
1. Inline styles [1.0.0.0]
A: <span id="demo" style="color:red"></span>
B: There is also the inline style object controlled by JS, document.getElementById("demo").style.color="red";
The two belong to the same level, but generally speaking, the inline style controlled by JS has a higher priority. This is related to the order of declaration and has nothing to do with the essence, because DOM operations are often performed after the DOM tree is loaded.
2. ID selector [0.1.0.0]
3. Class, attribute, pseudo-class selectors [0.0.1.0]
4. Element tags, pseudo-element selectors [0.0.0.1]
For more information about CSS selectors, please refer to the W3C or CSS manual. I won’t go into details here.
Note the pseudo-class selector
LVHA pseudo-class, styles are overwritten from right to left in the LVHA priority order, and different orders will produce different effects.
a:link - Default link style
a:visited - visited link style
a:hover - mouse hover style
a:active - Mouse click style Finally, let’s write about the phenomenon of JS controlling inline styles with !important:
Look at the normal Demo1 :

Copy code

The code is as follows:

Copy code

The code is as follows:

Copy code

The code is as follows:

Finally, the background is displayed in red, which should not be a problem. !important will change the priority wherever it is placed, and the subsequent JS code will not change the priority.
--------------------------------------------------------------------------------
Another Demo2 :

Copy code

The code is as follows:

Copy code

The code is as follows:

Copy code

The code is as follows:

IE6,7 displays red
FF2+ shows yellow
Opera9+ displays red
Safari shows yellow
--------------------------------------------------------------------------------
Demo3:

Copy code

The code is as follows:

Copy code

The code is as follows:

Copy code

The code is as follows:

IE6,7 displays red
FF2+ shows yellow
Opera9+ displays black
Safari displays black
--------------------------------------------------------------------------------
Explain the above two examples :
The style object controlled by JS is actually an inline style, which is correct.

However, the three browsers give different results for the !important added to the JS control style object attribute value:
IE: JS controls the style object attribute value to completely override the inline style attribute value. Element.style.property="value !important" is not supported and an error message will be displayed: Invalid parameter.
FF2+: Element.style.property="value !important" is not fully supported: !important is invalid and no error is reported. If the inline style attribute value does not have !important, it will be completely overwritten. If it has !important, the inline style attribute has the highest priority and will not be affected by any JS-controlled style.
Opera9+: JS controls the style object attribute value to completely override the inline style attribute value, and supports Element.style.property="value !important".
Safari: Supports Element.style.property="value !important" . If the inline style attribute value does not have !important, it will be completely overwritten. If it has !important, the inline style attribute will have the highest priority and will not be affected by any JS-controlled style.

Is the CSS style priority based on the order in which it appears in the style sheet or the order in which the class or id values are declared in the element?
I used to think that the later value declared in the class had a higher priority, but it actually depends on the order in which it appears in the style sheet.
Code:

Copy code

The code is as follows:

The div's style will display the blue style color.
Learn all the technologies in the front-end industry and travel to all the cities around Beijing. Then I will return to the place where I was born and raised, because home is where my relatives are.

<<: A detailed introduction to JavaScript execution mechanism

>>: Example code for using text-align and margin: 0 auto to center in CSS

Implementation of MySQL multi-version concurrency control MVCC

Discussion on CSS style priority and cascading order

Implementation of MySQL multi-version concurrency control MVCC

The docker prune command can be used to periodically clean up infrequently used data

MySQL 5.6 binary installation process under Linux

MySQL Database Indexes and Transactions

Shorten the page rendering time to make the page run faster

A simple way to implement all functions of shopping cart in Vue

Summary of various methods of implementing article dividing line styles with CSS

CSS achieves colorful and smart shadow effects

Introduction to HTML basic controls_PowerNode Java Academy

Solution to the problem of data loss when using Replace operation in MySQL

Recommend

MySQL 5.7.23 installation and configuration method graphic tutorial

Learn asynchronous programming in nodejs in one article

Customize the style of the <input type="file"> element used when uploading files in HTML

Detailed explanation of Angular parent-child component communication

Common problems in implementing the progress bar function of vue Nprogress

Tkinter uses js canvas to achieve gradient color

Native js to implement a simple calculator

Detailed explanation of several ways to create objects and object methods in js

Detailed explanation of MySQL slow queries

Analysis on the problem of data loss caused by forced refresh of vuex

How to remove inline styles defined by the style attribute (element.style)

This article will help you get started and understand the basic operations of Jquery

MySQL data type optimization principles

Best Practices Guide for MySQL Partitioned Tables

A brief discussion on the solution to the problem of native page compatibility with IE9