您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)css樣式優(yōu)先級法則的示例分析的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
css樣式優(yōu)先級介紹:
當(dāng)外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素時,優(yōu)先級如下:
(外部樣式)External style sheet <(內(nèi)部樣式)Internal style sheet <(內(nèi)聯(lián)樣式)Inline style
有個例外的情況,就是如果外部樣式放在內(nèi)部樣式的后面,則外部樣式將覆蓋內(nèi)部樣式。
示例如下:
<head> <style type="text/css"> /* 內(nèi)部樣式 */ h4{color:green;} </style> <!-- 外部樣式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- 設(shè)置:h4{color:blue;} --> </head> <body> <h4>測試!</h4> </body>
選擇器的優(yōu)先權(quán)
解釋:
1. 內(nèi)聯(lián)樣式表的權(quán)值最高 1000;
2. ID 選擇器的權(quán)值為 100
3. Class 類選擇器的權(quán)值為 10
4. HTML 標(biāo)簽選擇器的權(quán)值為 1
利用選擇器的權(quán)值進(jìn)行計算比較,示例如下:
<html> <head> <style type="text/css"> #redP p { /* 權(quán)值 = 100+1=101 */ color:#F00; /* 紅色 */ } #redP .red em { /* 權(quán)值 = 100+10+1=111 */ color:#00F; /* 藍(lán)色 */ } #redP p span em { /* 權(quán)值 = 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>
結(jié)果:<em> 標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍(lán)色。
CSS 優(yōu)先級法則:
A 選擇器都有一個權(quán)值,權(quán)值越大越優(yōu)先;
B 當(dāng)權(quán)值相等時,后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置;
C 創(chuàng)作者的規(guī)則高于瀏覽者:即網(wǎng)頁編寫者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式;
D 繼承的CSS 樣式不如后來指定的CSS 樣式;
E 在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級最大;示例如下:
(學(xué)習(xí)視頻分享:css視頻教程)
<html> <head> <style type="text/css"> #redP p{ /*兩個color屬性在同一組*/ color:#00f !important; /* 優(yōu)先級最大 */ color:#f00; } </style> </head> <body> <div id="redP"> <p>color</p> <p>color</p> </div> </body> </html>
結(jié)果:在Firefox 下顯示為藍(lán)色;在IE 6 下顯示為紅色;
使用腳本添加樣式
當(dāng)在連接外部樣式后,再在其后面使用JavaScript 腳本插入內(nèi)部樣式時(即內(nèi)部樣式使用腳本創(chuàng)建),IE 瀏覽器就表現(xiàn)出它的另類了。代碼如下:
<html> <head> <title> demo </title> <meta name="Author" content="xugang" /> <!-- 添加外部CSS 樣式 --> <link rel="stylesheet" href="styles.css" type="text/css" /> <!-- 在外部的styles.css文件中,代碼如下: h4 {color:blue;} --> <!-- 使用javascript 創(chuàng)建內(nèi)部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="h4 {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> <h4>在IE中我是綠色,非IE瀏覽器下我是藍(lán)色!</h4> </body> </html>
結(jié)果:在Firefox / Chrome / Safari / Opera 中,文字都是藍(lán)色的。而在IE 瀏覽器中,文字卻是綠色的。
附加
在IE 中添加樣式內(nèi)容的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>之前, 但實際內(nèi)存中,<style>卻在<link>之后。 這也是“IE中奇怪的應(yīng)用CSS的BUG”之所在! */ var oStyleSheet = document.styleSheets[0]; //這實際是在<link>的外部樣式中追加 oStyleSheet.addRule("h4","color:green;"); alert(oStyleSheet.rules[0].style.cssText); alert(document.styleSheets[0].rules[0].style.cssText); //方式2 var cssStr="h4 {color:green;}"; document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;
IE 瀏覽器下載或者渲染的順序可能如下:
● IE 下載的順序是從上到下;
● JavaScript 函數(shù)的執(zhí)行會阻塞IE 的下載;
● IE 渲染的順序也是從上到下;
● IE 的下載和渲染是同時進(jìn)行的;
● 在渲染到頁面的某一部分時,其上面的所有部分都已經(jīng)下載完成(但并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完。)
● 在下載過程中,如果遇到某一標(biāo)簽是嵌入文件,并且文件是具有語義解釋性的(例如:JS腳本,CSS樣式),那么此時IE的下載過程會啟用單獨連接進(jìn)行下載。并且在下載后進(jìn)行解析,如果JS、CSS中如有重定義,后面定義的函數(shù)將覆蓋前面定義的函數(shù)。
● 解析過程中,停止頁面所有往下元素的下載。樣式表文件比較特殊,在其下載完成后,將和以前下載的所有樣式表一起進(jìn)行解析,解析完成后,將對此前所有元素(含以前已經(jīng)渲染的)重新進(jìn)行樣式渲染。并以此方式一直渲染下去,直到整個頁面渲染完成。
● Firefox 處理下載和渲染的順序大體相同,只是在細(xì)微之處有些差別,例如:iframe 的渲染。
感謝各位的閱讀!關(guān)于“css樣式優(yōu)先級法則的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。