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

咱們有些程序猿在給一個元素(好比div)應用樣式的時候，會有一些疑問，爲何我寫在後面的樣式不能覆蓋前面的樣式呢，不是說 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選擇器樣式

/*給id爲article的標籤應用樣式 */ #article{            font-size: 0.8em;      float:right; }   /*給全部指定container爲class的標籤應用樣式*/ .container{            font-size: 0.5em;      border:1px solid red; }

這是咱們發現，除了給div加了個黃色邊框，div的背景色依然是行內樣式設置的黃色，字體大小是#article裏設置的。由此咱們能夠發現，雖然.container寫在#article下面，可是卻沒有覆蓋已經定義過的樣式，這就證實了：行內樣式 > ID選擇器樣式 > 類選擇器樣式

 

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

/*給id爲article的標籤應用樣式 */ #article{            font-size: 0.8em;      float:right; }   /*給全部指定container爲class的標籤應用樣式*/ .container{            font-size: 0.5em;      border:1px solid red; }   div{            font-size:1em;      border:2px solid black;      color:green; }

咱們會發現，只有字體的顏色發生了變化，其餘的樣式仍是以前的樣式，這就說明標記選擇器沒有覆蓋前面類選擇器，ID選擇器以及行內已定義的樣式。這也就證實了 ： 行內樣式 >ID選擇器 > 類選擇器 > 標記選擇器.

 

轉載自實戰互聯網:http://www.itdriver.cn/html/2014/08/03/9.html