官方表述的CSS樣式優先順序如下：

通用選擇器（*） < 元素(型別)選擇器 < 類選擇器 < 屬性選擇器 < 偽類 < ID 選擇器 < 內聯樣式

 CSS 偽類用於向某些選擇器新增特殊的效果

屬性選擇器可以根據元素的屬性及屬性值來選擇元素。

那麼，我們來舉個例子：

html程式碼：

<div class="img-div">
    <img src="images/icon.png" class="img" id="img" alt="img" style="width:50px" />
</div>

引入一個style.css樣式：

<link type="text/css" rel="stylesheet" href="css/style.css" />
 

在style.css樣式中寫入

*{width:100px}通用選擇器（*）

.img{width:400px;}類class選擇器

img[alt="img"] {width:300px}偽類選擇器

img:hover{width:350px}屬性選擇器

img{width:450px}元素(型別)選擇器

#img{width:250px;}id選擇器

開啟html可以發現

                     圖1 ↑

可見內聯式的樣式權重要高於外部引用，那麼我們把內聯的style樣式去掉，圖片顯示大小如圖2：

                 圖2↑                圖3↑                     圖4↑

同樣是外部引用的樣式，ID比其他的都要優先，把#img的樣式去掉，效果如圖3：效果是引用了屬性選擇器寬度為300px 

再把滑鼠移動上去效果如圖4。

以此類推，分別去掉屬性選擇器（圖4），類class選擇器（圖5），元素選擇器（圖6）通用選擇器*（圖7）

       圖5↑                    圖6↑                  圖7↑

再將外部引用的樣式複製到html中嵌入<style></style>：

<style>
    *{width:500px}
    #img{width:550px;}
    img[alt="img"] {width:600px}
    img:hover{width:650px}
    .img{width:700px;}
    img{width:750px}
</style>
 

發現嵌入式的樣式權重都要高於外部引用，最後的優先順序如下：

*上述表格從小到大，數值越小越優先！

事實上，CSS內部是按每條樣式的權重值來計算優先順序的，各型別選擇器所對應的權重值如下：

元素, 偽元素: 1 – (0,0,0,1) 
類, 偽類, 屬性: 1 – (0,0,1,0) 
ID: 1 – (0,1,0,0) 
內聯樣式: 1 – (1,0,0,0)

也就相當於：

1. 第一等：代表內聯樣式，如: style=””，權值為1000。
2. 第二等：代表ID選擇器，如：#content，權值為100。
3. 第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
4. 第四等：代表型別選擇器和偽元素選擇器，如div p，權值為1。

例項： 

<div class="img-div" id="img-div">
    <div id="img-div1">
        <img src="images/u484.png" class="img" id="img" alt="img" />
    </div>
</div>

#img-div #img-div1 #img{width:300px}//300
#img-div #img{width:200px}//200
#img{width:150px;}//100

顯示結果：

！important修改權重

如非特殊情況，慎用!important。因為使用!important會擾亂原本層疊和權重產生正常的作用順序，使後期維護帶來麻煩。