Home > Developer > Web Develop
Priority of Style
Multiple styles (multiple styles): If the external style, inner style, and inline styles apply to the same element at the same time, this is the case for multiple styles.
In general, the priority is as follows:
(external style) External style sheet < (inner style) Internal style sheet < (inline style) inline style
An exception to this is that if an external style is placed behind an internal style , the outer style overrides the inner style.
Examples are as follows:
| <style type= "Text/css" > |
| /* Internal style */ |
| H3{color:green;} |
| </style> |
| <!--external style style.css-- |
| <link rel= "stylesheet" type= "Text/css" href= "Style.css"/> |
| <!--settings: H3{color:blue; |
| <body> |
| </body> |
Preference for selectors
Explain:
1. The weighted value of the inline style sheet is up to 1000;
2. The value of the ID selector is 100
3. The class selector has a weight value of 10
4. The weight value of the HTML tag Selector is 1
The calculation comparison is performed using the weights of the selectors, as shown in the following example:
| <style type= "Text/css" > |
| #redP p { |
| /* Weighted value = 100+1=101 */ |
| Color: #F00; /* Red */ |
| } |
| #redP. Red EM { |
| /* Weighted value = 100+10+1=111 */ |
| Color: #00F; /* Blue */ |
| } |
| #redP p span em { |
| /* Weighted value = 100+1+1+1=103 */ |
| Color: #FF0; */yellow */ |
| } |
| </style> |
| <body> |
| <div id= "REDP" > |
| <p class= "Red" >red |
| <span><em>em red</em></span> |
| </p> |
| <p>red</p> |
| </div> |
| </body> |
results The data in the:<em> tag is displayed in blue.
CSS Priority rule:
A selector has a weighted value, the greater the weight the higher the priority;
B when the authority value is equal, the style sheet setting appears better than the style sheet setting that appears first;
C Creator's rule is higher than the viewer: that is, the CSS style set by the page writer has precedence over the style set by the browser;
The CSS style inherited by D is not as good as the CSS style later specified;
E the "!important" rule has the highest priority in the same set of property settings; examples are as follows:
| <style type= "Text/css" > |
| #redP p{ |
| /* Two color properties in the same group */ |
| Color: #00f!important; /* Priority Max */ |
| Color: #f00; |
| } |
| </style> |
| <body> |
| <div id= "REDP" > |
| <p>color</p> |
| <p>color</p> |
| </div> |
| </body> |
results : Blue is displayed in Firefox, Red in IE 6;
Add a style using a script
when you join an external style, and then insert an internal style with a JavaScript script behind it (that is, the internal style is created using a script), IE shows its alternative. the code is as follows:
| <title> Demo </title> |
| <meta name= "Author" content= "Xugang"/> |
| <!--add an external CSS style-- |
| <link rel= "stylesheet" href= "Styles.css" type= "Text/css"/> |
| <!--in the external styles.css file, the code is as follows: |
| h3 {Color:blue;} |
| - |
| <!--Create an internal CSS style using JavaScript-- |
| <script type= "Text/javascript" > |
| <!-- |
| (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) |
| Head.insertbefore (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); |
| } |
| Else |
| { |
| S.INNERHTML=CSSSTR; |
| Head.insertbefore (S,link); |
| } |
| })(); |
| - |
| </script> |
| <body> |
| </body> |
result : in Firefox/chrome/safari/opera, the text is blue. in Internet Explorer, the text is green.
Additional
Add the JavaScript code for the 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 is to insert <style> before <link>, |
| But the actual in-memory,<style> is behind <link>. |
| This is also "the strange application of CSS in IE bug" where! |
| */ |
| var ostylesheet = document.stylesheets[0]; |
| This is actually appended to the external style of <link> |
| Ostylesheet.addrule ("H3", "Color:green;"); |
| Alert (ostylesheet.rules[0].style.csstext); |
| Alert (document.stylesheets[0].rules[0].style.csstext); |
| Mode 2 |
| var cssstr= "h3 {Color:green;}"; |
| Document.styleSheets.item (document.stylesheets.length-1). Csstext=cssstr; |
The order in which Internet Explorer downloads or renders may be as follows:
the order of IE download is from top to bottom;
the execution of JavaScript functions will block the download of IE;
the order of IE rendering is also from top to bottom;
The download and rendering of IE is carried out at the same time;
when you render to a portion of a page, all of its parts are already downloaded (but not all associated elements have been downloaded.) )
During the download process, if you encounter a tag embedded in the file, and the file is semantically explanatory (for example: JS script, CSS style), then the download process of IE will enable a separate connection to download. And after the download to parse, if JS, CSS, if there is a redefinition, the function defined later will overwrite the previously defined function.
During parsing, the download of all elements down the page is stopped. The style sheet file is special, and after its download is complete, it is parsed with all previously downloaded style sheets, and after parsing is completed, all previous elements (including previously rendered) are re-styled. and continue to render in this way until the entire page rendering is complete.
firefox handles downloading and rendering in roughly the same order, except for some nuances, such as the rendering of an IFRAME.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
