Web page CSS Precedence

Web pages loaded with multiple CSS style files, one of which is the Ext library's own style file, which defines a number of styles for all tags, causing the original page to be displayed incorrectly. Re-set the correct style by finding the corresponding style. The new style is added to the Body tab, but there are two styles, and the ext style is still valid. The last discovery when setting a new style does not add *, resulting in only the body tag is useful, and the child tag is invalid. The following is the modified style

[CSS]  . DIY,  . DIY *{      Box-sizing:content-box;      -moz-box-sizing:content-box;      -webkit-box-sizing:content-box;  }

When a label is defined in more than one style, and there is a conflict between styles, the priority is "style defined for ID" > "Class definition Style" > "Style defined for label type". For example, below are some styles

[CSS] div{      border:2px solid #0000FF;   }      . powerheader{      border:2px solid #00ff00;   }      #navigation {      border:2px solid #ff0000;   }

In the label <div id= "Navigation" class= "Powerheader", the first application is #navigation, when #navigation does not exist when applied. Powerheader style, and finally the div style.

At the same time, when you use link or style to define a conflict between multiple label classes, the class that is defined in the last one is applied.

Understanding CSS style Precedence can avoid many style conflict issues in web development.

