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