CSS的進(jìn)入門(mé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)，依賴(lài)正確的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í)是基于不同種類(lèi)選擇器組成的匹配規(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"]），類(lèi)，偽類(lèi)(:link 或者 :hover)增加10；
ID增加100；
內(nèi)聯(lián)樣式增加1000；
用上面的方式計(jì)算下下面的選擇器的具性：
p.note 1 類(lèi) + 1 元素 = 11
#sidebar p[lang="en"] 1 ID + 1 屬性 + 1 元素 = 111
body #main .post ul li:last-child 1 ID + 1 類(lèi) + 1 偽類(lèi) + 3 元素 = 123
W3C的標(biāo)準(zhǔn)中也有一個(gè)類(lèi)似的計(jì)算方式，以a=0, b=0, c=0, d=0為初始值，以如下情況換為數(shù)字：
如果是內(nèi)聯(lián)樣式：a = 1;
b = ID的個(gè)數(shù)；
c = 選擇器,類(lèi)和偽類(lèi)的個(gè)數(shù)和；
d = 元素名稱(chēng)的個(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 否定偽類(lèi)在優(yōu)先級(jí)計(jì)算中不會(huì)被看作是偽類(lèi). 事實(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ù)雜的選擇器；
更多的依賴(lài)具性值，而不是依賴(lài)選擇器的順序，這樣的樣式表更容易修改和維護(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)形成新類(lèi)（…）的一種方式。繼承被用來(lái)幫助重用現(xiàn)有代碼。新類(lèi)（…）繼承已存在的類(lèi)的屬性和行為?！?/p>
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ì)算值不依賴(lài)文檔是否已平鋪完。
使用值：文檔平鋪完成之后，由計(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í)
