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:<style type="text/css"> div{background: red !important; background: blue} </style> 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:<style type="text/css"> div{background: blue; background: red !important; } </style> 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:<style type="text/css"> div{background: red !important; height:20px;} #demo1{ background: green;} .demo1{ background:blue;} </style> Copy code The code is as follows:<div class="demo1" id="demo1" style="background: yellow"></div> Copy code The code is as follows:<script type="text/javascript"> document.getElementById("demo1").style.background="black"; </script> 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:<style type="text/css"> div{background: red !important; height:200px;} #demo2{ background: green;} .demo2{ background: blue;} </style> Copy code The code is as follows:<div class="demo2" id="demo2" style="background: yellow !important"></div> Copy code The code is as follows:<script type="text/javascript"> document.getElementById("demo2").style.background="black"; </script> IE6,7 displays red FF2+ shows yellow Opera9+ displays red Safari shows yellow -------------------------------------------------------------------------------- Demo3: Copy code The code is as follows:<style type="text/css"> div{background: red !important; height:200px;} #demo3{ background: green;} .demo3{ background: blue;} </style> Copy code The code is as follows:<div class="demo3" id="demo3" style="background: yellow !important"> </div> Copy code The code is as follows:<script type="text/javascript"> document.getElementById("demo3").style.background="black !important"; </script> 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:<style type="text/css"> div{ height: 200px; width: 200px; background: red; } .b{ background: green; } .a{ background: blue;} </style> </head> <body> <div class="ab" 2style="background:pink;"> </div> </body> 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
Recommend
Analysis of the Neglected DOCTYPE Description
doctype is one of them: <!DOCTYPE HTML PUBLIC &...
Common problems in implementing the progress bar function of vue Nprogress
NProgress is the progress bar that appears at the...
Boundary and range description of between in mysql
mysql between boundary range The range of between...
Vue folding display multi-line text component implementation code
Folding display multi-line text component Fold an...
Example of using HTML+CSS to implement a secondary menu bar when the mouse is moved
This article introduces an example of using HTML+...
How to print highlighted code in nodejs console
Preface When the code runs and an error occurs, w...
Detailed explanation of the use of grid properties in CSS
Grid layout Attributes added to the parent elemen...
How to limit the value range of object keys in TypeScript
When we use TypeScript, we want to use the type s...
Nginx builds rtmp live server implementation code
1. Create a new rtmp directory in the nginx sourc...
Table of CSS Bugs Caused by hasLayout
IE has had problems for a long time. When everyone...
In-depth understanding of Mysql transaction isolation level and locking mechanism issues
Overview Databases generally execute multiple tra...
How to configure Nginx to support ipv6 under Linux system
1. Check whether the existing nginx supports ipv6...
Prototype and prototype chain prototype and proto details
Table of contents 1. Prototype 2. Prototype chain...
Detailed explanation of how to reduce memory usage in MySql
Preface By default, MySQL will initialize a large...
MySQL stored functions detailed introduction
Table of contents 1. Create a stored function 2. ...