CSS 的優先級機制[總結]

時間 2019-12-09

標籤 css 優先級機制總結欄目 CSS 简体版

原文原文鏈接

CSS 的優先級機制[總結] - 鋼鋼 - 博客園javascript

CSS 的優先級機制[總結]

樣式的優先級css

多重樣式（Multiple Styles）：若是外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是使多重樣式的狀況。 html

通常狀況下，優先級以下：java

（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline stylenode

有個例外的狀況，就是若是外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式。chrome

示例以下：瀏覽器

<head>

/* 內部樣式 */

h3{color:green;}

</style>

</head>

<body>

</body>

選擇器的優先權app

解釋：函數

1. 內聯樣式表的權值最高 1000；測試

2. ID 選擇器的權值爲 100

3. Class 類選擇器的權值爲 10

4. HTML 標籤選擇器的權值爲 1

利用選擇器的權值進行計算比較，示例以下：

<html>

<head>

#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>

<p class="red">red

</p>

</div>

</body>

</html>

結果：<em> 標籤內的數據顯示爲藍色。

CSS 優先級法則：

A 選擇器都有一個權值，權值越大越優先；

B 當權值相等時，後出現的樣式表設置要優於先出現的樣式表設置；

C 創做者的規則高於瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式；

D 繼承的CSS 樣式不如後來指定的CSS 樣式；

E 在同一組屬性設置中標有「!important」規則的優先級最大；示例以下：

<html>

<head>

#redP p{

/*兩個color屬性在同一組*/

color:#00f !important; /* 優先級最大 */

color:#f00;

}

</style>

</head>

<body>

<p>color</p>

</div>

</body>
</html>

結果：在Firefox 下顯示爲藍色；在IE 6 下顯示爲紅色；

使用腳本添加樣式

當在鏈接外部樣式後，再在其後面使用JavaScript 腳本插入內部樣式時（即內部樣式使用腳本建立），IE 瀏覽器就表現出它的另類了。代碼以下：

<html>

<head>

<!-- 在外部的styles.css文件中，代碼以下：

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)

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 的下載；

● IE 渲染的順序也是從上到下；

● IE 的下載和渲染是同時進行的；

● 在渲染到頁面的某一部分時，其上面的全部部分都已經下載完成（但並非說全部相關聯的元素都已經下載完。）

● 在下載過程當中，若是遇到某一標籤是嵌入文件，而且文件是具備語義解釋性的（例如：JS腳本，CSS樣式），那麼此時IE的下載過程會啓用單獨鏈接進行下載。而且在下載後進行解析，若是JS、CSS中若有重定義，後面定義的函數將覆蓋前面定義的函數。

● 解析過程當中，中止頁面全部往下元素的下載。樣式表文件比較特殊，在其下載完成後，將和之前下載的全部樣式表一塊兒進行解析，解析完成後，將對此前全部元素（含之前已經渲染的）從新進行樣式渲染。並以此方式一直渲染下去，直到整個頁面渲染完成。

● Firefox 處理下載和渲染的順序大致相同，只是在細微之處有些差異，例如：iframe 的渲染。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。