瀏覽器是通過判斷CSS優先級,來決定到底哪些屬性值是與元素最為相關的,從而作用到該元素上。CSS選擇器的合理組成規則決定了優先級,我們也常常用選擇器優先級來合理控製元素達到我們理想的顯示狀態,下面我們來具體了解下CSS選擇器優先級及權重。
當CSS選擇器權重相同,則最後的聲明的CSS選擇器覆蓋靠前的 CSS。
CSS優先級是根據由每種選擇器類型構成的級聯字串計算而成的,它不是一個對應相應匹配表達式的權重值。
相同CSS表達式,在DOM結構中的距離是不會對元素優先級計算產生影響的。
下列是一份優先級逐級增加的選擇器列表:
通用選擇器
元素(類型)選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器
內聯樣式
Multiple Styles
)如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素,就是使多重樣式的情況。
一般情況下,優先級為:(外部樣式)External style sheet
<(內部樣式)Internal style
sheet
<(內聯樣式)Inline style
有個例外的情況,就是如果外部樣式放在內部樣式的後面,則外部樣式將覆蓋內部樣式。
示例如下:
- <head>
- <style type="text/css">
- h3{color:green;}
- </style>
- <!-- 外部樣式 style.css -->
- <link rel="stylesheet"type="text/css"href="style.css"/>
- <!-- 設置:h3{color:blue} -->
- </head>
- <body>
- <h3>welcome sojson.com</h3>
- </body>
選擇器的優先權解釋說明
內聯樣式表的權值最高 1000。
ID
選擇器的權值為 100。
Class
類選擇器的權值為 10。
HTML
標簽(類型)選擇器的權值為 1。
- <html>
- <head>
- <style type="text/css">
- #redP p {
- color:#F00;
- }
- #redP .red em {
- color:#00F;
- }
- #redP p span em {
- color:#FF0;
- }
- </style>
- </head>
- <body>
- <divid="redP">
- <pclass="red">red
- <span><em>em red</em></span>
- </p>
- <p>red</p>
- </div>
- </body>
- </html>
選擇器都有一個權值,權值越大越優先。
當權值相等時,後出現的樣式表設置要優於先出現的樣式表設置。
創作者的規則高於瀏覽者:即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式。
繼承的CSS 樣式不如後來指定的CSS 樣式
在同一組屬性設置中標有「!important」規則的優先級最大。
!important
規則實例:
- <html>
- <head>
- <style type="text/css">
- #redP p{
- color:#00f !important;
- color:#f00;
- }
- </style>
- </head>
- <body>
- <divid="redP">
- <p>color</p>
- <p>color</p>
- </div>
- </body>
- </html>
當在連接外部樣式後,再在其後面使用JavaScript
腳本插入內部樣式時(即內部樣式使用腳本創建),IE
瀏覽器就表現出它的另類了。代碼如下:
- <html>
- <head>
- <title> demo </title>
- <metaname="Author"content="xugang" />
- <!-- 添加外部CSS 樣式 -->
- <linkrel="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>
IE
下載的順序是從上到下;
JavaScript
函數的執行會阻塞IE
的下載;
IE
渲染的順序也是從上到下;
IE
的下載和渲染是同時進行的;
在渲染到頁面的某一部分時,其上面的所有部分都已經下載完成(但並不是說所有相關聯的元素都已經下載完。)
在下載過程中,如果遇到某一標簽是嵌入文件,並且文件是具有語義解釋性的(例如:JS
腳本,CSS
樣式),那麽此時IE的下載過程會啟用單獨連接進行下載。並且在下載後進行解析,如果JS、CSS中如有重定義,後面定義的函數將覆蓋前面定義的函數。
解析過程中,停止頁面所有往下元素的下載。樣式表文件比較特殊,在其下載完成後,將和以前下載的所有樣式表一起進行解析,解析完成後,將對此前所有元素(含以前已經渲染的)重新進行樣式渲染。並以此方式一直渲染下去,直到整個頁面渲染完成。
Firefox
處理下載和渲染的順序大體相同,只是在細微之處有些差別,例如:iframe
的渲染。