CSS的進(jìn)入門檻非常低癞尚，主要是由于其清晰和易于理解語(yǔ)法技俐，即使你沒(méi)有任何CSS經(jīng)驗(yàn)，也可以在短短幾個(gè)小時(shí)內(nèi)學(xué)習(xí)一個(gè)簡(jiǎn)單的基于CSS的網(wǎng)站圈暗。
但是粥鞋，表面上的簡(jiǎn)單性是騙人的航徙。你花了幾個(gè)小時(shí)制作了一個(gè)網(wǎng)頁(yè)，可能在Safari上看起來(lái)很棒陷虎，但是你并沒(méi)有去適配Internet Explorer到踏，那么有可能會(huì)讓你非常的崩潰。兼容性問(wèn)題是CSS的遇到的最多的問(wèn)題尚猿。要解決兼容性問(wèn)題窝稿，真的需要積累很多的經(jīng)驗(yàn)，依賴正確的css使用方式凿掂。
要想能夠正確的使用CSS伴榔，精通CSS，理解一些概念是非常有必要的庄萎。
Specificity和Inheritance是這些概念中最重要的兩個(gè)踪少。
“級(jí)聯(lián)”的概念是CSS的核心。它最終決定哪些屬性如何應(yīng)用到特定元素糠涛。級(jí)聯(lián)有三個(gè)主要概念：importance援奢、specificity和source order。這三者共同確定了要分配給元素的屬性的權(quán)重忍捡。
瀏覽器通過(guò)優(yōu)先級(jí)來(lái)判斷哪一些屬性值與一個(gè)元素最為相關(guān)集漾，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則砸脊。
importance具篇、specificity和source order共同決定了css的優(yōu)先級(jí)。
importance （重要性）
樣式有如下的來(lái)源：
用戶代理：比如瀏覽器默認(rèn)的樣式.
用戶：比如用戶瀏覽器自己的設(shè)定的樣式
作者（開(kāi)發(fā)者）：頁(yè)面提供的CSS凌埂，可能是內(nèi)嵌樣式驱显，可能是引用樣式。
上面的順序瞳抓，也是瀏覽器處理不同來(lái)源樣式的順序埃疫，后面的優(yōu)先級(jí)更高。
!important 在樣式中需要考慮的一個(gè)重要聲明挨下。這個(gè)聲明用于平衡用戶和作者樣式之間的優(yōu)先級(jí)熔恢。雖然作者的樣式優(yōu)先級(jí)比用戶高，但是臭笆，如果用戶的樣式規(guī)則里面有 !important叙淌，即使作者的規(guī)則里面有!important 也會(huì)被用戶的規(guī)則覆蓋掉秤掌。
知道了這些規(guī)則后，我們來(lái)看下最終的優(yōu)先級(jí)順序鹰霍，下面是按照優(yōu)先級(jí)升序排列：
用戶代理聲明的
用戶聲明的
作者聲明的
作者使用!important的
用戶使用!important聲明的
Specificity（具性）
我個(gè)人翻譯成了具性闻鉴，個(gè)人理解的是更具體更細(xì)節(jié)的指定某個(gè)元素。
前面說(shuō)過(guò)每個(gè)CSS規(guī)則都一個(gè)權(quán)重值茂洒，這個(gè)權(quán)重決定了在應(yīng)用css屬性遇到?jīng)_突的時(shí)候哪個(gè)規(guī)則生效孟岛。
在評(píng)估一個(gè)規(guī)則的權(quán)重時(shí)，一個(gè)更具體的規(guī)則比一個(gè)更大范圍的規(guī)則優(yōu)先級(jí)更高督勺。
如果兩個(gè)樣式具有相同的權(quán)重渠羞、來(lái)源和具性，則只最后出現(xiàn)的規(guī)則生效智哀。
2.1 如何計(jì)算具性
有一系列方式計(jì)算選擇器的具性次询。
最快的計(jì)算方式如下：
元素和偽元素（像:before，:after）增加1瓷叫；
屬性（比如[type="text"]）屯吊，類，偽類(:link 或者 :hover)增加10摹菠；
ID增加100盒卸；
內(nèi)聯(lián)樣式增加1000；
用上面的方式計(jì)算下下面的選擇器的具性：
p.note 1 類 + 1 元素 = 11
#sidebar p[lang="en"] 1 ID + 1 屬性 + 1 元素 = 111
body #main .post ul li:last-child 1 ID + 1 類 + 1 偽類 + 3 元素 = 123
W3C的標(biāo)準(zhǔn)中也有一個(gè)類似的計(jì)算方式次氨，以a=0, b=0, c=0, d=0為初始值蔽介，以如下情況換為數(shù)字：
如果是內(nèi)聯(lián)樣式：a = 1;
b = ID的個(gè)數(shù)；
c = 選擇器,類和偽類的個(gè)數(shù)和糟需；
d = 元素名稱的個(gè)數(shù)+ 偽元素的個(gè)數(shù)
根據(jù)上述算法屉佳，讓我們看一個(gè)計(jì)算具性值的例子：
<p style="color:#000000;"> a=1, b=0, c=0, d=0 → 1000
footer nav li:last-child a=0, b=0, c=1, d=3 → 0013
#sidebar input:not([type="submit"]) a=0, b=1, c=1, d=1 → 0111
:not 否定偽類在優(yōu)先級(jí)計(jì)算中不會(huì)被看作是偽類. 事實(shí)上, 在計(jì)算選擇器數(shù)量時(shí)還是會(huì)把其中的選擇器當(dāng)做普通選擇器進(jìn)行計(jì)數(shù).
如果使用@import引用CSS谷朝，引用的CSS要早于你的CSS洲押，如果遇到兩個(gè)選擇器有相同的具性值，那么后面的將覆蓋前面的圆凰。
2.2 讓具性值為你工作
如果沒(méi)有考慮清楚具性值是什么的話杈帐，可能會(huì)導(dǎo)致你的樣式表既冗余又復(fù)雜。
遵循下面的準(zhǔn)則可以避免大部分問(wèn)題：
使用普通的選擇器专钉，逐漸的增加具性值挑童；
使用高級(jí)選擇器并不代表使用復(fù)雜的選擇器；
更多的依賴具性值跃须，而不是依賴選擇器的順序站叼，這樣的樣式表更容易修改和維護(hù)；
重構(gòu)CSS選擇器要比簡(jiǎn)單的修改CSS屬性要簡(jiǎn)單的多菇民。
3.繼承
繼承是將屬性值從父元素傳播到其子元素的一種方式尽楔。
默認(rèn)情況下投储，某些CSS屬性由元素的子元素繼承。例如阔馋，如果將body設(shè)置為特定字體玛荞，則該字體將由其他元素繼承，如標(biāo)題和段落呕寝，而無(wú)需特別指定勋眯。這就是繼承的魔力。
CSS規(guī)范指定每個(gè)屬性是否默認(rèn)繼承下梢。不是所有的屬性都是繼承的客蹋，但是可以通過(guò)inherit強(qiáng)制繼承它們。
3.1面向?qū)ο蟪绦虻睦^承
盡管超出了本文的范圍孽江，CSS繼承不應(yīng)與面向?qū)ο缶幊蹋∣OP）繼承相混淆嚼酝。這里是維基百科OOP繼承的定義，它清楚地說(shuō)明我們說(shuō)的是不同的事情：
在面向?qū)ο缶幊蹋∣OP）中竟坛，繼承是使用已經(jīng)定義的類來(lái)形成新類（…）的一種方式闽巩。繼承被用來(lái)幫助重用現(xiàn)有代碼。新類（…）繼承已存在的類的屬性和行為担汤∠芽纾…
3.2 如何繼承功能
當(dāng)一個(gè)元素從它的父節(jié)點(diǎn)繼承一個(gè)值時(shí)，它繼承的是計(jì)算值崭歧。這意味著什么隅很？每個(gè)CSS屬性在確定其值時(shí)經(jīng)歷四步。以下是W3C規(guī)范的摘錄：
屬性的最終值要經(jīng)歷四步計(jì)算：
通過(guò)規(guī)范指定值（指定值）率碾，然后再被解析為用于繼承的值（計(jì)算值）叔营，然后如果有必要的話在轉(zhuǎn)換為絕對(duì)值（使用值），最后根據(jù)本地環(huán)境轉(zhuǎn)換為實(shí)際值（實(shí)際值）
如下所示：
指定值：用戶代理決定了屬性值是來(lái)自樣式表所宰，繼承的绒尊，還是初始值
計(jì)算值：指定值會(huì)被解析為計(jì)算值。計(jì)算值不依賴文檔是否已平鋪完仔粥。
使用值：文檔平鋪完成之后婴谱，由計(jì)算值轉(zhuǎn)換為使用值。
實(shí)際值：最終用于渲染的值躯泰，把使用值轉(zhuǎn)換為真正被渲染是使用的值谭羔。
如果你看CSS屬性規(guī)范的時(shí)候，你會(huì)看到麦向，它定義的初始值瘟裸，繼承狀態(tài)，和計(jì)算值诵竭。比如background-color規(guī)范規(guī)范如下：
Name: background-color
Value: <color>
Initial: transparent
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual Computed
value: the computed color(s)
一個(gè)元素從其父元素繼承的是計(jì)算值话告。即使在樣式表中沒(méi)有指定十办，屬性值也可以被繼承：此時(shí)繼承的是初始值。所以即使父元素沒(méi)有指定屬性值也可以繼承超棺。
本文翻譯并參考了如下兩篇文章：
CSS Specificity And Inheritance
CSS優(yōu)先級(jí)
