Home > Web Front-end > CSS Tutorial > Web css priority

Web css priority

高洛峰
Release: 2016-11-24 11:39:06
Original
1876 people have browsed it

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;  
}
Copy after login

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;   
}
Copy after login

are in the tag

Related labels:
css
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template