Shulou(Shulou.com)06/03 Report--

This article mainly introduces the css style priority and cascading order of the example analysis, the article is very detailed, has a certain reference value, interested friends must read it!

In general:

[1 important symbol] > [4 special marks] > order of declaration

! important > [id > class > tag]

Using! important can change the priority to the highest, followed by style objects, followed by id > class > tag, and in addition, styles that appear after sibling styles are declared have high priority.

­

Let's take a look at this first! this weird thing like important

The code is as follows:

Div {background: red! important; background: blue}

With the exception of IE6, other browsers will show a red background, exactly! the function of important means that as long as I am here, I am the most important, nothing can replace me, do not see is one! Do you add an English word important? It's very vivid and apt. IE6 here will show that the background is blue, not that IE6 does not support! important, but that it will appear after the style declaration order to cover the front, at this time it no longer knows! important, it does not recognize six relatives. This is one of the widely circulated IE6 hack. If you write this, it will normally show that the background is red:

The code is as follows:

Div {background: blue; background: red! important;}

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

From left to right, a certain position is given + 1 at a time, and the former paragraph has an irrefutable overwhelming advantage over the latter. No matter how big the last digit is, it can never exceed the 1 of the previous digit.

1, inline style [1.0.0.0]

A:

B: there are inline style style objects controlled by JS, document.getElementById ("demo") .style.color = "red"

The two belong to the same level, but in general, inline styles controlled by JS have high priority, which has nothing to do with sequential declarations and has nothing to do with nature, because DOM operations are often done after the DOM tree has been loaded.

2Magi ID selector [0.1.0.0]

3, class, attribute, pseudo-class selector [0.0.1.0]

4, element tag, pseudo element selector [0.0.0.1]

You can check the W3C or CSS manual for CSS selectors, and don't bother.

Pay attention to the pseudo class selector

LVHA pseudo-class, the style is overwritten from right to left in the order of LVHA priority, different order will produce different effects.

A:link-default link styl

A:visited-Link style accessed

A:hover-rollover styl

A:active-Mouse Click Styl

Finally, write about the phenomenon of JS control inline style band! important:

Take a look at normal Demo1:

The code is as follows:

Div {background: red! important; height:20px;}

# demo1 {background: green;}

.demo1 {background:blue;}

The code is as follows:

The code is as follows:

Document.getElementById ("demo1") .style.background = "black"

The end result shows that the background is red, which should not be a problem. The important will change the priority wherever it is placed, and the later JS code will not change the priority.

Another Demo2:

The code is as follows:

Div {background: red! important; height:200px;}

# demo2 {background: green;}

.demo2 {background: blue;}

The code is as follows:

The code is as follows:

Document.getElementById ("demo2") .style.background = "black"

IE6,7 shows red

FF2+ shows yellow

Opera9+ shows red

Safari shows yellow

­Demo3:

The code is as follows:

Div {background: red! important; height:200px;}

# demo3 {background: green;}

.demo3 {background: blue;}

The code is as follows:

­

The code is as follows:

Document.getElementById ("demo3") .style.background = "black! important"

IE6,7 shows red

FF2+ shows yellow

Opera9+ displays black

Safari displays black

­explain the above two examples:

It is true that the style object controlled by ­JS is actually an inline style style.

­

However, the three browsers of important, which is added to the property value of the JS control style object, give different results:

­IE:JS controls that the property value of the style object completely overrides the inline style property value and does not support Element.style.property= "value! important". An error will be reported: the parameter is invalid.

FF2+: does not fully support Element.style.property= "value! important":! important is invalid and will not report an error. If the inline style attribute value is no! important, then it is completely overwritten. If there is! important, the inline style attribute has the highest priority and will not be affected by the JS control style.

Opera9+: JS controls that the style object attribute value completely overrides 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 no! important, it is completely overridden. If there is! important, the inline style attribute has the highest priority and will not be affected by the JS control style.

Does the css style take precedence in the order in which it appears in the stylesheet or in the order in which the class or id values in the element are declared?

Values that were previously thought to be late declared in class take precedence, but are actually based on the order in which they appear in the stylesheet.

Code:

The code is as follows:

Div {height: 200px; width: 200px; background: red;}

.b {background: green;}

.a {background: blue;}

The style of div displays the style color of blue.

Learn all the technologies of the front-end industry and play in all the cities around Beijing. Then I will go back to the place where I was born and raised, because the place with relatives is home.

The above is all the content of the article "sample Analysis of css style priority and cascading order". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.