Style overrides in CSS precedence order

Original address: http://www.3lian.com/edu/2014/09-25/168393.html

The Cascade priority is:

Browser default < external style sheet < internal style sheet < inline style

The style sheet is also:

Class Selector < class derivation Selector < ID selector < ID derivation Selector

The derived selector was previously called the context selector, so the full cascade priority is:

Browser default < external style sheet < external style sheet class selector < external style sheet class derivation selector < external style sheet ID selector < external style sheet ID derivation selector < internal style sheet < internal style Sheet class selector < internal style sheet class derivation Selector < internal style Sheet ID selector < internal style sheet ID derivation selector < inline style ... A total of 12 priority levels

Sometimes in the process of writing CSS, some restrictions always do not work, which involves the CSS style overlay problems, as follows

The code is as follows
#navigator { height:100%; width:200; Position:absolute; left:0; Border:solid 2 #EEE; } . current_block { Border:solid 2 #AE0; }

Find some textbooks (w3schools, etc.), just say that the order of the CSS is "style on the element" > "style element on file header" > "External Style File", but the precedence of multiple same styles in the style file is not explained in detail. After testing and continuing the search, you know that the priority is listed as follows:

1. The more precise the element selector selection of a style sheet, the higher the style precedence.

The ID selector Specifies the style > class selector for the specified style > element type selector for the specified style

So in the example above, #navigator的样式优先级大于. Current_block priority, even if. Current_block is newly added and does not work.

2. For styles specified by the same type selector, the higher the precedence is in the style sheet file.

Note that this is the higher priority in the style sheet file, rather than the order in which the element class appears. For example. Class2 appears in the style sheet after the. Class1:

The code is as follows
. Class1 { Color:black; } . class2 { color:red; }

While an element is specified in class with class= "Class2 Class1″ this way, although Class1 is specified in the element after Class2, but because in the style sheet file Class1 in front of Class2, At this point, the Class2 is still a higher priority, and the color property is red, not black.

3. If you want a style to have a higher priority, you can use!important to specify it.

The code is as follows
. Class1 { Color:black!important; } . class2 { color:red; }

Solution:

At this point, the class will use black rather than red.

There are two solutions for the problem at first:

1. Take the border out of the #navigator and put it in a class. block, and. Block before the. Current_block:

The code is as follows
#navigator { height:100%; width:200; Position:absolute; left:0; } . Block { Border:solid 2 #EEE; } . current_block { Border:solid 2 #AE0; }

Need to specify class= "block" by default for #navigator element

2. Use!important:

The code is as follows
#navigator { height:100%; width:200; Position:absolute; left:0; Border:solid 2 #EEE; } . current_block { Border:solid 2 #AE0!important; }

No other changes are required to take effect at this time. It can be seen that the second scenario is simpler.

Style overrides in CSS precedence order