css優先順序判斷

標籤：style   blog   http   color   io   使用   ar   strong   檔案   

概念

瀏覽器是通過判斷優先順序，來決定到底哪些屬性值是與元素最相關的，從而應用到該元素上。優先順序是由選取器組成的匹配規則決定的。

如何計算?

優先順序是根據由每種選取器類型構成的級聯字串計算而成的. 它不是一個對應相應匹配運算式的權重值.

如果優先順序相同,元素最終會應用 CSS 中靠後的聲明.

注意: 在文檔樹中的距離是不會對元素優先順序計算產生影響的.（可以看文檔中無視DOM樹中的距離的例子）

優先順序順序

下列是一份優先順序逐級增加的選取器列表:

• 通用選取器*
• 元素(類型)選取器
• 類別選取器
• 屬性選取器
• 偽類
• 識別碼選取器
• 內聯樣式

事實上，元素還可以從父元素上繼承一些樣式，如color等屬性。這些繼承的樣式的優先順序永遠低於元素本身的樣式，包括通用選取器：

1 <div id=‘test‘>2     <a href="#">text</a>3 </div>

1 * {2     color:red;3 }4 5 #test{6     color:blue; 7 }

最終text的顏色是紅色的。

!important 規則是例外

當!important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪個位置. 儘管如此, !important規則還是與優先順序毫無關係使用!important不是一個好習慣，因為它改變了你樣式表本來的級聯規則，從而難以調試。

 

一些不成文規則

• 不要在全站範圍的css中使用!important.

• 只在需要覆蓋全站範圍的css或是外部css（例如引用的ExtJs或是YUI）的時候才在指定的頁面上使用 !important。

• 不要在你的外掛程式中使用!important。

• 永遠都要優先考慮使用樣式規則的優先順序來解決問題而不是 !important。

取而代之，你可以:

更好的利用CSS的級聯屬性

更多的使用適合的選取器。比如在你需要選定的對象元素前加上更多的元素，使選擇的範圍縮小，你的選取器就變得更有針對性，從而提高優先順序：

1 <div id="test">2   <span>Text</span>3 </div>4 5 div#test span { color: green }6 span { color: red }7 div span { color: blue }

無論你c?ss語句的順序是什麼樣的，文本都會是綠色的(green)因為這一條規則是最有特殊性、優先順序最高的。（同理，無論語句順序怎樣，藍色(blue)的規則都會覆蓋紅色(red)的規則）

什麼時候應該使用：

A) 一種情況

你的網站上有一個設定了全站樣式的CSS檔案，同時你（或是你同事）寫了一些效果通常都是很差的行內樣式（行內樣式的優先順序是最高的）。

在這種情況下，你就可以在你全域的CSS檔案中寫一些!important的樣式來覆蓋掉那些直接寫在元素上的行內樣式。

活生生的例子比如：有人在jQuery外掛程式裡寫了糟糕的行內樣式。

B) 另一種情況

1 #someElement p {2     color: blue;3 }4 5 p.awesome {6     color: red;7 }

在外層有 #someElement 的情況下，你怎樣能使 awesome 的段落變成紅色呢？這種情況下，如果不使用!important，第一條規則永遠比第二條的優先順序更高。 

 

怎樣覆蓋掉 !important

很簡單，你只需要再加一條 !important 的CSS語句，將其應用到更高優先順序的選取器（在原有基礎上添加額外的標籤、class或id選取器）上；或是保持選取器一樣，但添加的位置需要在原有聲明的後面（優先順序相同的情況下，後邊定義的會覆蓋前邊定義的）。

1 <div>2   <a href="#" id="test">text</a>3 </div>

想要把原有的綠色文本變成紅色，提升優先順序的方式:

1 #test.a{2   color: red !important;<!--儘管這條聲明在前，但是仍會覆蓋下邊的樣式-->3 }4 a{5   color: green !important;6 }

不過

1 a{2   color: green !important;3 }4 a{5   color: red !important;<!--同樣的選取器，後邊的聲明會覆蓋前邊的-->6 }

 

 

原文來自：http://segmentfault.com/a/1190000000453851

css優先順序判斷