CSS樣式定義的優先順序順序總結

css樣式定義的優先順序順序總結

層疊優先順序是:

瀏覽器預設 < 外部樣式表 < 內部樣式表 < 內聯樣式

其中樣式表又有:

類選擇器 < 類派生選擇器 < id選擇器 < id派生選擇器

派生選擇器以前叫上下文選擇器，所以完整的層疊優先順序是:

瀏覽器預設 < 外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表id選擇器 < 外部樣式表id派生選擇器 < 內部樣式表 < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表id選擇器 < 內部樣式表id派生選擇器 < 內聯樣式...共12個優先順序

為了說明該問題，請參見下面的例子說明。

[html]view plain

copy

title>  

div  /* 綠色 */  

.a1  /* 藍色 */  

.a1 div  /* 青色 */  

.a2  /* 紅色 */  

#a2  /* 黃色 */  

#a2 div  /* 紫色 */  

style>  

head>  

我是綠色，內部樣式表優先於瀏覽器預設div>  

我是紅色，類選擇器優先於內部樣式表div>  

我是黃色，id選擇器優先於類選擇器div>  

我是藍色，類選擇器優先於內部樣式表span>  

我是青色，類派生選擇器優先於類選擇器div>  

我還是青色，類派生選擇器優先於所有類選擇器div>  

我是黃色，id選擇器優先於類派生選擇器span>  

我是紫色，id派生選擇器優先於類派生選擇器div>  

我還是紫色，id派生選擇器優先於所有類選擇器div>  

我還是紫色，id派生選擇器優先於所有id選擇器div>  

我是黑色，內聯樣式駕到閒雜人等退下div>  

div>  

div>  

body>  

html>  

執行後的效果圖：

另外，如果同乙個元素在沒有其他樣式的作用影響下，其class定義了多個並以空格分開，其優先順序順序為：

乙個元素同時應用多個class，後定義的優先（即近者優先），加上!important者最優先！

[html]view plain

copy

>  

title>  

.a2   

.a1   

style>  

head>  

a1span>

a2span>

a2 a1span>

a1 a2span>

body>  

html>  

執行後的效果圖：

CSS樣式定義的優先順序順序總結

css樣式定義的優先順序順序總結 層疊優先順序是 瀏覽器預設 外部樣式表 內部樣式表 內聯樣式 其中樣式表又有 類選擇器 類派生選擇器 id選擇器 id派生選擇器 派生選擇器以前叫上下文選擇器，所以完整的層疊優先順序是 瀏覽器預設 外部樣式表 外部樣式表類選擇器 外部樣式表類派生選擇器 外部樣式表i...

如何定義css優先順序順序

1.層疊選擇器的優先順序 瀏覽器預設 外部樣式表 內部樣式表 內聯樣式 其中,樣式表優先順序 類選擇器 類派生選擇器 id選擇器 id派生選擇器 生選擇器以前叫上下文選擇器，所以完整的層疊優先順序是 瀏覽器預設 外部樣式表 外部樣式表類選擇器 外部樣式表類派生選擇器 外部樣式表id選擇器 外部樣式表...

css樣式優先順序

多重樣式將層疊為乙個 樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 html 元素中，在 html 頁的頭元素中，或在乙個外部的 css 檔案中。甚至可以在同乙個 html 文件內部引用多個外部樣式表。層疊次序 當同乙個 html 元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有...