深入理解CSS選擇器的優先順序

CSS中有很多選擇器，例如類別選擇器，標籤選擇器，ID選擇器等等，不同選擇器之間的優先順序也不一樣，今天就跟大家聊聊CSS選擇器的優先級順序，以及、!important的使用，有需要的朋友可以參考一下，希望對你有用。

1、!important 表示最高優先權。 ie6瀏​​覽器不認識 !important 。

範例：

正常情況下，寫在下面的樣式優先權高於上面的樣式

demo1{
color:red;
color:green; /*绿色的优先级高于红色，所有浏览器都会显示绿色*/
}

加了!important 那麼它的優先權會比較高， ie6比較傻，不認識。

demo2 {
color:red !important; /*除了ie6，其他浏览器会认为红色优先级高，显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}

但是注意，ie6不認識!important的優先級，但不代表ie6不認識帶!important的樣式屬性。

demo3{
color:red;
color:green !important; /*包括ie6，所有浏览器都显示绿色字体，ie6只是不认识优先级罢了*/
}

2、CSS (Cascading Style Sheets) 級聯樣式表，在實際應用中，一般有以下三種級聯方式。

優先權：內嵌樣式表(標籤內部)> 嵌入樣式表(目前檔案)> 外部樣式表(外部檔案)。

1. 外聯式（套用於多個網頁）

外接樣式表中，CSS 程式碼會作為檔案單獨存放，如以 style.css 檔案包含所有樣式。在 HTML 中的外部級聯採用 標記或 @import 語句來引入。

範例程式碼如下：

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入

和@import 的異同見其文章

2. 內聯式（套用於目前頁面）

入口網站的CSS 程式碼通常採用嵌入式，即通常所說的內聯方式(Inline Style)，其使用