CSS中選擇器優先級順序實戰講解

如果你在開發中也遇到同樣的問題，即在給某一進制素應用樣式的時候（比如寫在外部樣式表中），寫在後面的樣式不能覆寫前面定義的樣式。這個時候，你可能就得考慮是不是沒考慮優先級問題了。

當我們在給一個标簽，比如div應用樣式的時候，我們得考慮優先級問題。

下面列出的就是是選擇器的優先級：

    行内樣式 > ID選擇器樣式 > 類别選擇器樣式 > 标記選擇器樣式

标記選擇器好比一個更廣泛的概念，然後到類别選擇器，到ID選擇器，最後到行内樣式，不斷的精确下去，是以越精确，優先級越高。比如下面的盒子模型：

我是标記選擇器 div

我是類别選擇器 .container

我是ID選擇器 #article

我是行内樣式 style

下面我對上面這些優先級分别作一下證明：

比如頁面中有一個div标簽，它有相應的id和class屬性，如下所示

<div id=”article”>itdriver.cn</div>

現在我們先給它應用行内樣式。

行内樣式 : 也即直接應用在元素上的樣式。 如 <div style=”</div>。 這個style屬性其實就是行内樣式。

<div id=”article” style=””>itdriver.cn</div>

這時我們的div背景就變成了黃色了。

接着我們再通過ID選擇器來設定div的樣式。

ID選擇器：所謂ID選擇器，就是我們在樣式表中，通過一個#id來給元素直接應用樣式，大家請看下面的代碼，就是如何給一個指定ID的元素應用樣式；

/*給id為article的标簽應用樣式 */

#article{

     font-size: 0.8em;

     float:right;

}

當我們運作示例的時候，會發現div的背景依然是黃色的，但是我們字型大小是按着#article來設定的(因為行内樣式沒有設定字型大小)。這就說明： 行内樣式 > ID選擇器應用的樣式。

接着ID選擇器的下面，我們應用class選擇器樣式

/*給所有指定container為class的标簽應用樣式*/

.container{

     font-size: 0.5em;

     border:1px solid red;

這是我們發現，除了給div加了個黃色邊框，div的背景色依然是行内樣式設定的黃色，字型大小是#article裡設定的。由此我們可以發現，雖然.container寫在#article下面，但是卻沒有覆寫已經定義過的樣式，這就證明了：行内樣式 > ID選擇器樣式 > 類選擇器樣式

最後再應用一個标記選擇器樣式

div{

     font-size:1em;

     border:2px solid black;

     color:green;

我們會發現，隻有字型的顔色發生了變化，其他的樣式還是之前的樣式，這就說明标記選擇器沒有覆寫前面類選擇器，ID選擇器以及行内已定義的樣式。這也就證明了 ： 行内樣式 >ID選擇器 > 類選擇器 > 标記選擇器.