Web css priority

Multiple css style files are loaded into the web page, one of which is the style file that comes with the Ext library, which defines some styles for all tags, causing the original web page to be displayed incorrectly. By finding the corresponding style, the correct style is reset. Add the new style to the body tag, but two styles appear, and the Ext style is still valid. When I finally discovered that I didn't add * when setting the new style, it was only useful for the body tag, but not for the sub-tags. 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 with multiple styles and there is a conflict between the styles, the priority is "Style defined for ID" > "Class defined style" > "For label Type defined style". For example, the following styles

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

are in the tag

. #navigation is applied first. When #navigation does not exist, the .powerHeader style is applied, and finally the div style.

At the same time, when there is a conflict between multiple tag classes defined using link or style alone, the class defined at the end will be applied.

Understanding CSS style priority can avoid many style conflict problems in web development.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn