CSS style load order and sequence coverage

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_44013783/article/details/102747050

Many novice friends to load the css styles to understand the order and the order has been covering deviation, using the following example for everyone at in detail, and interested friends not to miss
{
height: 100%;
width: 200;
position: Absolute;
left : 0;
border: Solid 2 #EEE;
}
.current_block {
border: Solid AE0 # 2;
}
　　Find several textbooks (W3Schools, etc.), only that the sequence is css "style on the element"> "style file head element ">" external pattern files ", but how priorities are arranged a plurality of the same style in the style file, not described in detail. Tested and continue the search, that the following priority order:

1. Stylesheet element selector to select the more accurate the higher the priority in which the pattern:
   ID specified style selector> class selector specified style> element specifies the type of the selected style
   So in the example, # navigator style priority level higher than the priority .current_block, even .current_block is newly added, it does not work.

2. For the same type selector to develop the style in the style sheet file, the higher priority the closer and
   note that this is a higher priority in the style sheet file rearward, rather than the order they appear in the element class. For example .class2 appear after .class1 in the style sheet:

{.class1
Color: Black;
}
.class2 {
Color: Red;
}
　　employed when an element specified class class = "class2 class1" specified in this way, then at the back of class2 class1 Although specified in the element, but because the style sheet file in front of class1 class2, class2 at this time is still higher priority, color attributes for the red, rather than black.

shut down