瀏覽器如何判斷css優(yōu)先級(jí)

 概念

瀏覽器是通過(guò)判斷優(yōu)先級(jí)，來(lái)決定到底哪些屬性值是與元素最相關(guān)的，從而應(yīng)用到該元素上。優(yōu)先級(jí)是由選擇器組成的匹配規(guī)則決定的。

如何計(jì)算?
優(yōu)先級(jí)是根據(jù)由每種選擇器類型構(gòu)成的級(jí)聯(lián)字串計(jì)算而成的. 它不是一個(gè)對(duì)應(yīng)相應(yīng)匹配表達(dá)式的權(quán)重值.

如果優(yōu)先級(jí)相同,元素最終會(huì)應(yīng)用 CSS 中靠后的聲明.

注意: 在文檔樹(shù)中的距離是不會(huì)對(duì)元素優(yōu)先級(jí)計(jì)算產(chǎn)生影響的.（可以看文檔中無(wú)視DOM樹(shù)中的距離的例子）

優(yōu)先級(jí)順序
下列是一份優(yōu)先級(jí)逐級(jí)增加的選擇器列表:

通用選擇器*
元素(類型)選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器
內(nèi)聯(lián)樣式
事實(shí)上，元素還可以從父元素上繼承一些樣式，如color等屬性。這些繼承的樣式的優(yōu)先級(jí)永遠(yuǎn)低于元素本身的樣式，包括通用選擇器：

最終text的顏色是紅色的。

!important 規(guī)則是例外
當(dāng)!important 規(guī)則被應(yīng)用在一個(gè)樣式聲明中時(shí),該樣式聲明會(huì)覆蓋CSS中任何其他的聲明, 無(wú)論它處在聲明列表中的哪個(gè)位置. 盡管如此, !important規(guī)則還是與優(yōu)先級(jí)毫無(wú)關(guān)系使用!important不是一個(gè)好習(xí)慣，因?yàn)樗淖兞四銟邮奖肀緛?lái)的級(jí)聯(lián)規(guī)則，從而難以調(diào)試。

一些不成文規(guī)則

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

只在需要覆蓋全站范圍的css或是外部css（例如引用的ExtJs或是YUI）的時(shí)候才在指定的頁(yè)面上使用 !important。

不要在你的插件中使用!important。

永遠(yuǎn)都要優(yōu)先考慮使用樣式規(guī)則的優(yōu)先級(jí)來(lái)解決問(wèn)題而不是 !important。

取而代之，你可以:

更好的利用CSS的級(jí)聯(lián)屬性

更多的使用適合的選擇器。比如在你需要選定的對(duì)象元素前加上更多的元素，使選擇的范圍縮小，你的選擇器就變得更有針對(duì)性，從而提高優(yōu)先級(jí)：

無(wú)論你c​ss語(yǔ)句的順序是什么樣的，文本都會(huì)是綠色的(green)因?yàn)檫@一條規(guī)則是最有特殊性、優(yōu)先級(jí)最高的。（同理，無(wú)論語(yǔ)句順序怎樣，藍(lán)色(blue)的規(guī)則都會(huì)覆蓋紅色(red)的規(guī)則）

什么時(shí)候應(yīng)該使用：
A) 一種情況

你的網(wǎng)站上有一個(gè)設(shè)定了全站樣式的CSS文件，同時(shí)你（或是你同事）寫了一些效果通常都是很差的行內(nèi)樣式（行內(nèi)樣式的優(yōu)先級(jí)是最高的）。

在這種情況下，你就可以在你全局的CSS文件中寫一些!important的樣式來(lái)覆蓋掉那些直接寫在元素上的行內(nèi)樣式。

活生生的例子比如：有人在jQuery插件里寫了糟糕的行內(nèi)樣式。

B) 另一種情況

在外層有 #someElement 的情況下，你怎樣能使 awesome 的段落變成紅色呢？這種情況下，如果不使用!important，第一條規(guī)則永遠(yuǎn)比第二條的優(yōu)先級(jí)更高。

怎樣覆蓋掉 !important

很簡(jiǎn)單，你只需要再加一條 !important 的CSS語(yǔ)句，將其應(yīng)用到更高優(yōu)先級(jí)的選擇器（在原有基礎(chǔ)上添加額外的標(biāo)簽、class或id選擇器）上；或是保持選擇器一樣，但添加的位置需要在原有聲明的后面（優(yōu)先級(jí)相同的情況下，后邊定義的會(huì)覆蓋前邊定義的）。

想要把原有的綠色文本變成紅色，提升優(yōu)先級(jí)的方式:

不過(guò)