CSS style priority

Generally:

[1 important flag]> [4 special symbols]> Declaration Order

! Important> [ID> class> tag]

Use! Important can change the priority level to the highest level, followed by the style object, followed by ID> class> tag. In addition, the style displayed after the same level style follows the declarative order has a high priority.

Let's take a look! Important.

1 <style type = "text/CSS">
2 Div {Background: red! Important; Background: Blue}
3 </style>

Except IE6, other browsers will display the background in red! The role of important means that as long as I am here, I am the most important. Nothing can replace me! Is there an English word important added? Very good image, very appropriate. In IE6, the background is blue, which is not supported by IE6! Important, but it will appear after the style Declaration Order to overwrite the previous one, at this time it does not know! Important, but it is not recognized. This is one of the widely used Internet Explorer 6 hack. In this case, the background is Red:

1 <style type = "text/CSS">
2 Div {Background: Blue; Background: red! Important ;}
3 </style>

Let's take a look at the four special symbols [0.0.0.0]

From left to right, each time a position is given + 1, the previous section has an overwhelming advantage over the next section. No matter how big the last digit is, it cannot exceed 1 of the previous digit.

1. inline style [1.0.0.0]

A: <span id = "Demo" style = "color: Red"> </span>
B: The JS-controlled inline style object, document. getelementbyid ("Demo"). style. color = "red ";
The two belong to the same level, but generally the JS-controlled inline style has a high priority, which is related to the sequential Declaration and has nothing to do with the nature, because often Dom operations are completed after the DOM tree is loaded.

2. ID selector [0.1.0.0]
3. Class, attribute, and pseudo-class selector [0.0.1.0]
4. Element tag, pseudo element selector [0.0.0.1]

For more information about the CSS selector, see the W3C or CSS manual.
Note that the pseudo-class selector

Lvha pseudo class, styleLvha priority orderFrom right to left, different sequence results in different effects.
A: Link-default link Style
A: visited-access link Style
A: hover-mouse hover Style
A: Active-mouse click Style

Finally, write down the JS control inline style belt! Important phenomenon:

Check the normal demo1:

1 <style type = "text/CSS">
2 Div {Background: red! Important; Height: 20px ;}
3 # demo1 {Background: green ;}
4. demo1 {Background: Blue ;}
5 </style>

1 <Div class = "demo1" id = "demo1" style = "Background: yellow"> </div>

1 <SCRIPT type = "text/JavaScript">
2document. getelementbyid ("demo1"). style. Background = "black ";
3 </SCRIPT>

The background is displayed in red, so there should be no problem ,! Important changes the priority wherever it is placed, and the subsequent JS Code does not change the priority.

Another demo2:

1 <style type = "text/CSS">
2 Div {Background: red! Important; Height: 200px ;}
3 # demo2 {Background: green ;}
4. demo2 {Background: Blue ;}
5 </style>
6 1 <Div class = "demo2" id = "demo2" style = "Background: yellow! Important "> </div> 1 <SCRIPT type = "text/JavaScript">
2 document. getelementbyid ("demo2"). style. Background = "black ";
3 </SCRIPT>
IE6, 7 show red ff2 + show yellow opera9 + show red safari show yellow

Demo3:

1 <style type = "text/CSS">
2 Div {Background: red! Important; Height: 200px ;}
3 # demo3 {Background: green ;}
4. demo3 {Background: Blue ;}
5 </style>

1 <Div class = "demo3" id = "demo3" style = "Background: yellow! Important "> </div> 1 <SCRIPT type = "text/JavaScript">
2 document. getelementbyid ("demo3"). style. Background = "black! Important ";
3 </SCRIPT>
IE6, 7 show red ff2 + show yellow opera9 + showBlackSafari displayBlack

The above two examples are explained:

The style object controlled by JS is actually an inline style. This is correct, but it is added to the attribute value of the style object controlled by JS! The important three browsers provide different results:

IE: JS controls the attribute values of style objects to completely overwrite the inline style attribute values. element. style. Property = "value! Important ", an error is returned: the parameter is invalid.

Ff2 +: Unsupported element. style. Property = "value! Important ":! Important is invalid and no error is reported. If the inline style attribute value is not found! Important, it is completely covered! Important has the highest priority for inline style attributes and is not affected by the style controlled by Js.

Opera9 +: JS controls the attribute value of the style object to completely overwrite 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 is none! Important, it is completely covered! Important has the highest priority for inline style attributes and is not affected by the style controlled by Js.