CSS priority mechanism

Priority of styles

Multiple Styles: If external styles, internal styles and inline styles are applied to the same element at the same time, it is the case of multiple styles.

Generally, the priority is as follows:

(External style)External style sheet <(Internal style)Internal style sheet <(Inline style)Inline style

There is an exception, that is, if the external style is placed after the internal style, the external style will override the internal style.

Examples are as follows:

##

## /* Internal style */ ## h3{color:green;} ## &lt ;!-- Settings: h3{color:blue;} --> Test! ## #Select Priority of the browser

Explanation: 1. The maximum weight of the inline style sheet is 1000 ;

2. The weight of the ID selector is 100

3. The weight of the Class selector is 10

4. The weight of the HTML tag selector is 1

Use the weight of the selector for calculation and comparison. The example is as follows:

##<html&gt ;

##

#redP p { / Red */ ##/*Rights value = 100+10+1 = 111*/ # COLOR:#00F;/*Blue*/ ## /*Power value = 100+1+1+1 = 103*/ #::#ff0 ## class="red">red ## #

Result: The data in the tag is displayed in blue.

CSS priority rule:

A Each selector has a weight, the greater the weight, the priority;

B When the weights are equal , the style sheet settings that appear later are better than the style sheet settings that appear first;

C The creator’s rules are higher than those of the browser: that is, the CSS style set by the web page writer has a higher priority than that set by the browser The style of

## redP p{ /*Two color attributes are in the same group */ ## color:#00f !important; /* Maximum priority */ color:#f00; } ## # ## ; ; color ## ; #

Result: Displayed in blue under Firefox; Displayed in red under IE 6;

Use script to add styles

When After connecting the external style, and then using JavaScript script to insert the internal style (that is, the internal style is created using the script), the IE browser shows its uniqueness. The code is as follows:

# ## demo ## ## h3 {color:blue;} ## --> (function(){ var agent = window.navigator.userAgent. toLowerCase(); ## var is_op = (agent.indexOf("opera") != -1); var is_ie = ( agent.indexOf("msie") != -1) && document.all && !is_op; var is_ch = (agent.indexOf("chrome") != -1) ; ## var cssStr="h3 {color:green;}"; var s=document.createElement("style"); var head=document.getElementsByTagName("head").item(0); var link=document.getElementsByTagName("link"); link=link.item(0); If(is_ie) If(link) ## stead.insertBeface (s, link); ## Else ## Head.appendchild (s); document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr; ## else if(is_ch) { ## var t=document.createTextNode(); t.nodeValue=cssStr; ## s.appendChild(t); ## head.insertBefore(s,link); } out to off ’’s out out through out out through out out through out out out out out out out out clean out out through over'' ’ s ‐ ‐ over'''''''s to ‐ to tossing's and s.innerHTML = cssStr; ## })(); ## //--> ## ## ## I am green in IE, not IE I am blue in the browser! ##

Result: In Firefox / Chrome / Safari / Opera, the text is blue. In the IE browser, the text is green.

Append

JavaScript code to add style content in IE:

var s=document.createElement("style"); ##var head=document.getElementsByTagName("head").item(0); var link=document.getElementsByTagName("link").item(0); head.insertBefore(s, link); ##/* Note: In IE, Although the code inserts before , But in actual memory, is after . This is also where the “strange CSS application BUG in IE” lies! */ ##var oStyleSheet = document.styleSheets[0]; //This is actually appending oStyleSheet.addRule("h3","color:green; to the external style of "); alert(oStyleSheet.rules[0].style.cssText); alert(document.styleSheets[0]. rules[0].style.cssText); //Method 2 var cssStr="h3 {color:green;}"; ##document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr; The order of IE browser downloading or rendering may be as follows:

● The order of IE downloading is from top to bottom;

● The execution of the JavaScript function will block the downloading of IE;

● The order of IE rendering is also from top to bottom;

● IE downloading and rendering are performed at the same time;

● When rendering to a certain part of the page, all parts above it have been downloaded (but this does not mean that all associated elements have been downloaded.)

● Downloading During the process, if a tag is encountered as an embedded file and the file is semantically interpretable (for example: JS script, CSS style), then the IE download process will enable a separate connection for downloading. And it will be parsed after downloading. If there is any redefinition in JS or CSS, the functions defined later will overwrite the functions defined earlier.

● During the parsing process, stop downloading all downward elements of the page. The style sheet file is special. After it is downloaded, it will be parsed together with all previously downloaded style sheets. After the parsing is completed, all previous elements (including those that have been rendered before) will be re-rendered. And continue rendering in this way until the entire page is rendered.

● Firefox processes downloading and rendering in roughly the same order, except for some subtle differences, such as iframe rendering.

For more articles related to CSS priority mechanism, please pay attention to the PHP Chinese website!