Style priority
Multiple styles (Multiple Styles): If the external style, internal style and inline styles applied to the same element at the same time, it is the case of multiple styles.
Generally, priority is as follows:
(External style) External style sheet <(inner pattern) Internal style sheet <(inline styles) Inline style
There are exceptions, that is, if the external style on the interior style of the back , the external style will override the internal style.
Examples are as follows:
| <head> |
| <style type="text/css"> |
| / * Internal style * / |
| h3{color:green;} |
| </style> |
| <-! External style the style.css -> |
| <link rel="stylesheet" type="text/css" href="style.css"/> |
| <! - Set: H3 {Color: Blue;} -> |
| </head> |
| <body> |
| < H3 > test! < / H3 > |
| </body> |
Filed selector
Explanation:
1. The inline style sheet weight value up to 1000;
2. ID selector weight of 100
3. Class class selector weight of 10
4. HTML tag selector a weight of 1
A selector for comparing the calculated weights, for example:
| <html> |
| <head> |
| <style type="text/css"> |
| #redP p { |
| /* 权值 = 100+1=101 */ |
| color:#F00; /* 红色 */ |
| } |
| #redP .red em { |
| /* 权值 = 100+10+1=111 */ |
| color:#00F; /* 蓝色 */ |
| } |
| #redP p span em { |
| /* 权值 = 100+1+1+1=103 */ |
| color:#FF0;/*黄色*/ |
| } |
| </style> |
| </head> |
| <body> |
| <div id="redP"> |
| <p class="red">red |
| <span><em>em red</em></span> |
| </p> |
| <p>red</p> |
| </div> |
| </body> |
| </html> |
结果：<em> 标签内的数据显示为蓝色。
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大；示例如下：
| <html> |
| <head> |
| <style type="text/css"> |
| #redP p{ |
| /*两个color属性在同一组*/ |
| color:#00f !important; /* 优先级最大 */ |
| color:#f00; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="redP"> |
| <p>color</p> |
| <p>color</p> |
| </div> |
| </body> </html> |
结果：在Firefox 下显示为蓝色；在IE 6 下显示为红色；
使用脚本添加样式
当在连接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本创建），IE 浏览器就表现出它的另类了。代码如下：
| <html> |
| <head> |
| <title> demo </title> |
| <meta name="Author" content="xugang" /> |
| <!-- 添加外部CSS 样式 --> |
| <link rel="stylesheet" href="styles.css" type="text/css" /> |
| <!-- 在外部的styles.css文件中，代码如下： |
| h3 {color:blue;} |
| --> |
| <!-- 使用javascript 创建内部CSS 样式 --> |
| <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> |
| </head> |
| <body> |
| <h3>在IE中我是绿色，非IE浏览器下我是蓝色！</h3> |
| </body> |
| </html> |
结果：在Firefox / Chrome / Safari / Opera 中，文字都是蓝色的。而在IE 浏览器中，文字却是绿色的。
附加
在IE 中添加样式内容的JavaScript 代码：
| var s=document.createElement("style"); |
| var head=document.getElementsByTagName("head").item(0); |
| var link=document.getElementsByTagName("link").item(0); |
| head.insertBefore(s,link); |
| /* 注意：在IE 中， |
| 虽然代码是将<style>插入在<link>之前， |
| 但实际内存中，<style>却在<link>之后。 |
| 这也是“IE中奇怪的应用CSS的BUG”之所在！ |
| */ |
| var oStyleSheet = document.styleSheets[0]; |
| //这实际是在<link>的外部样式中追加 |
| oStyleSheet.addRule("h3","color:green;"); |
| alert(oStyleSheet.rules[0].style.cssText); |
| alert(document.styleSheets[0].rules[0].style.cssText); |
| //方式2 |
| var cssStr="h3 {color:green;}"; |
| document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr; |
IE 浏览器下载或者渲染的顺序可能如下：
● IE 下载的顺序是从上到下；
● JavaScript 函数的执行会阻塞IE 的下载；
● IEs are rendered sequentially from top to bottom;
● IEs downloading and rendering are performed simultaneously;
● when rendering to a certain part of the page, all of the above have been part of their download is complete (but not to say that all the elements associated with have been downloaded.)
● In the download process, if they are embedded in a label file, and the file is an explanatory semantics (e.g.: JS script, CSS style), then the time will activate IE download process to download a separate connection. After downloading and parsing, if JS, CSS if the redefined defined later function overwrites the function defined above.
● resolution process, stops the download page down all the elements. Stylesheet rather special, after the download is complete, will be parsed and all style sheets previously downloaded together, after completion of the analysis, will have had all the elements (including previously rendered) re-style rendering. And in this way it has been rendered down, until the entire page rendering is complete.
● Firefox download order processing and rendering much the same, just some differences in the nuances, such as: iframe rendering.
| Author: XuGang screen name: Steel Steel |
| Source: http://xugang.cnblogs.com |
| Disclaimer: This article belongs to the author and blog Park total. Declared by this section must be retained when reproduced, and the original connection address given in the apparent position of the article page! |