css權(quán)重及優(yōu)先級問題
幾個(gè)值的對比
初始值
指定值
計(jì)算值
應(yīng)用值
CSS屬性的 指定值 (specified value)會通過下面3種途徑取得：
在當(dāng)前文檔的樣式表中給這個(gè)屬性賦的值，會被優(yōu)先使用。
如果在當(dāng)前文檔的樣式表中沒有給這個(gè)屬性賦值，那么它會嘗試從父元素那繼承一個(gè)值。
如果上面的兩種途徑都不可行，則把CSS規(guī)范中針對這個(gè)元素的這個(gè)屬性的初始值作為指定值
應(yīng)用值（used value）是完成所有計(jì)算后最終使用的值。計(jì)算出CSS屬性的最終值有三個(gè)步驟。
首先，指定值specified value 取自樣式層疊 (選取樣式表里權(quán)重最高的規(guī)則), 繼承 (如果屬性可以繼承則取父元素的值)，或者默認(rèn)值。
然后，按規(guī)范算出 計(jì)算值computed value。
最后，計(jì)算布局(尺寸比如 auto 或 百分?jǐn)?shù) 換算為像素值 )， 結(jié)果即 應(yīng)用值used value。
這些步驟是在內(nèi)部完成的，腳本只能使用
window.getComputedStyle獲得最終的應(yīng)用值。
CSS 2.0 只定義了 計(jì)算值 computed value 作為屬性計(jì)算的最后一步。 CSS 2.1 引進(jìn)了定義明顯不同的的應(yīng)用值，這樣當(dāng)父元素的計(jì)算值為百分?jǐn)?shù)時(shí)子元素可以顯式地繼承其高寬。 對于不依賴于布局的 CSS 屬性 (例如 display, font-size, line-height)計(jì)算值與應(yīng)用值一樣，否則就會不一樣
優(yōu)先級
優(yōu)先級是瀏覽器是通過判斷哪些屬性值與元素最相關(guān)以決定并應(yīng)用到該元素上的。優(yōu)先級僅由選擇器組成的匹配規(guī)則決定的。
優(yōu)先級是根據(jù)由每種選擇器類型構(gòu)成的級聯(lián)字串計(jì)算而成的。他是一個(gè)對應(yīng)匹配表達(dá)式的權(quán)重。
如果優(yōu)先級相同，靠后的 CSS 會應(yīng)用到元素上。
下列是一份優(yōu)先級逐級增加的選擇器列表：
通用選擇器（*）
元素(類型)選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器
內(nèi)聯(lián)樣式
!important規(guī)則例外 Link
當(dāng)
!important規(guī)則被應(yīng)用在一個(gè)樣式聲明中時(shí),該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪里. 盡管如此,!important規(guī)則還是與優(yōu)先級毫無關(guān)系.使用!important不是一個(gè)好習(xí)慣，因?yàn)樗淖兞四銟邮奖肀緛淼募壜?lián)規(guī)則，從而使其難以調(diào)試。
一些經(jīng)驗(yàn)法則：
Never 永遠(yuǎn)不要在全站范圍的 css 上使用
!importantOnly 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用
!importantNever 永遠(yuǎn)不要在你的插件中使用
!importantAlways 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是
!important
怎樣覆蓋掉 !important
很簡單，你只需要再加一條 !important 的CSS語句，將其應(yīng)用到更高優(yōu)先級的選擇器（在原有基礎(chǔ)上添加額外的標(biāo)簽、類或 ID 選擇器）上；
或是保持選擇器一樣，但添加的位置需要在原有聲明的后面（優(yōu)先級相同的情況下，后邊定義的會覆蓋前邊定義的）。
:not 偽類例外
:not 否定偽類在優(yōu)先級計(jì)算中不會被看作是偽類. 事實(shí)上, 在計(jì)算選擇器數(shù)量時(shí)還是會把其中的選擇器當(dāng)做普通選擇器進(jìn)行計(jì)數(shù).
無視DOM樹中的距離
有如下樣式聲明:
body h1 { color: green;
}html h1 { color: purple;
}當(dāng)它應(yīng)用在下面的HTML時(shí):
<html><body>
<h1>Here is a title!</h1></body></html>瀏覽器會將它渲染成purple，即后面的優(yōu)先級更高
外邊距合并
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上，它是有意義的。以由幾個(gè)段落組成的典型文本頁面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。
可替換元素
CSS 里，可替換元素是這樣一些元素， 其展現(xiàn)不是由CSS來控制的。這些外部元素的展現(xiàn)不依賴于CSS規(guī)范。 典型的可替換元素有 <img>、 <object>、 <video> 以及 <textarea>、 <input> 這樣的表單元素。 一些元素，比如 <audio> 和<canvas> ，只在一些特殊情況下是可替換元素。 使用了 CSS content 屬性插入的對象被稱作匿名的可替換元素。
CSS在某些情況下會對可替換元素做特殊處理，比如計(jì)算外邊距和處理值為 auto 的情況。
需要注意的是，一部分（并非全部）可替換元素，本身具有尺寸和基線，會被一些 CSS 屬性用到，比如 vertical-align。
下一篇：沒有了
