Webpage css priority

Multiple css style files are loaded in the webpage, one of which is the style file that comes with the Ext library. Some styles are defined for all labels, leading to incorrect display of the original webpage. Find the corresponding style and reset the correct style. Add the new style to the body tag. However, if two styles appear, the Ext style is still valid. At last, we found that * was not added when setting the new style, so it is only useful to the body tag, but not to the Child tag. The modified style [css] is shown below. diy ,. diy * {box-sizing: content-box;-moz-box-sizing: content-box;-webkit-box-sizing: content-box ;} when a tag is defined with multiple styles and there is a conflict between styles, the priority is "style defined for ID"> "Class-defined style"> "style defined for label type ". For example, the following style [css] div {border: 2px solid # 0000FF ;}. powerHeader {border: 2px solid #00ff00;} # navigation {border: 2px solid # ff0000;} in the tag <div id = "navigation" class = "powerHeader">, the first application is # navigation, which is applied when # navigation does not exist. powerHeader style, followed by div style. At the same time, when a conflict occurs between multiple label classes defined by link or style, the class defined at the end will be applied. Understanding css style priority can avoid many style conflicts during webpage development.