本文最初於2017-07-29發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一起入門和進階前端。
以下是正文。
本文重點
- CSS的繼承性
- CSS的層疊性
- 計算權重
- 權重問題大總結
- CSS樣式表的沖突的總結
- 權重問題深入
- 同一個標簽，攜帶了多個類名
- !important標記
CSS的繼承性
我們來看下面這樣的代碼，來引入繼承性：
上方代碼中，我們給div標簽增加紅色屬性，卻發現，div里的每一個子標簽<p>也增加了紅色屬性。於是我們得到這樣的結論：
有一些屬性，當給自己設置的時候，自己的后代都繼承上了，這個就是繼承性。
繼承性是從自己開始，直到最小的元素。
但是呢，如果再給上方的代碼加一條屬性：
上圖中，我們給div加了一個border，但是發現只有div具備了border屬性，而p標簽卻沒有border屬性。於是我們可以得出結論：
-
關於文字樣式的屬性，都具有繼承性。這些屬性包括：color、 text-開頭的、line-開頭的、font-開頭的。
-
關於盒子、定位、布局的屬性，都不能繼承。
以后當我們談到css有哪些特性的時候，我們要首先想到繼承性。而且，要知道哪些屬性具有繼承性、哪些屬性沒有繼承性。
CSS的層疊性
很多公司如果要筆試，那么一定會考層疊性。
層疊性：計算權重
層疊性：就是css處理沖突的能力。 所有的權重計算，沒有任何兼容問題！
CSS像藝術家一樣優雅，像工程師一樣嚴謹。
我們來看一個例子，就知道什么叫層疊性了。
上圖中，三種選擇器同時給P標簽增加顏色的屬性，但是，文字最終顯示的是藍色，這個時候，就出現了層疊性的情況。
當多個選擇器，選擇上了某個元素的時候，要按照如下順序統計權重：
id的數量，類的數量，標簽的數量
因為對於相同方式的樣式表，其選擇器排序的優先級為：ID選擇器 > 類選擇器 > 標簽選擇器
針對上面這句話，我們接下來舉一些復雜一點的例子。
層疊性舉例
舉例1：計算權重
如上圖所示，統計各個選擇器的數量，優先級高的勝出。文字的顏色為紅色。
PS：不進位，實際上能進位（奇淫知識點：255個標簽，等於1個類名）但是沒有實戰意義！
舉例2：權重相同時
上圖可以看到，第一個樣式和第二個樣式的權重相同。但第二個樣式的書寫順序靠后，因此以第二個樣式為准（就近原則）。
舉例3：具有實戰性的例子
現在我要讓一個列表實現上面的這種樣式：第一個li為紅色，剩下的li全部為藍色。
如果寫成下面這種代碼是無法實現的：
無法實現的原因很簡單，計算一下三個選擇器的權重就清楚了，顯然第二個樣式被第一個樣式表覆蓋了。
正確的做法是：（非常重要）
上圖中，第二個樣式比第一個樣式的權重要大。因此在實戰中可以實現這種效果：所有人當中，讓某一個人為紅，讓其他所有人為藍。
這種方式好用是好用，但用好很難。
就拿上方代碼來舉例，為了達到這種效果，即為了防止權重不夠，比較穩妥的做法是：把第二個樣式表照着第一個樣式表來寫，在此基礎上，給第二個樣式表再加一個權重。
上面這個例子很具有實戰性。
舉例4：繼承性造成的影響
這里需要聲明一點：
如果不能直接選中某個元素，通過繼承性影響的話，那么權重是0。
為了驗證上面這句話，我們來看看下面這樣的例子：
另外：如果大家都是0，那么有一個就近原則：誰描述的近，聽誰的。舉例如下：
層疊性：權重計算的問題大總結（非常重要）
層疊性。層疊性是一種能力，就是處理沖突的能力。當不同選擇器，對一個標簽的同一個樣式，有不同的值，聽誰的？這就是沖突。css有着嚴格的處理沖突的機制。
通過列舉上面幾個例子，我們對權重問題做一個總結。
上面這個圖非常重要，我們針對這個圖做一個文字描述：
- 選擇上了，數權重，(id的數量，類的數量，標簽的數量)。如果權重一樣，誰寫在后面聽誰的。
- 沒有選擇上，通過繼承影響的，就近原則，誰描述的近聽誰的。如果描述的一樣近，比如選擇器權重，如果權重再一樣重，誰寫在后面聽誰的。
CSS樣式表的沖突的總結
- 1、對於相同的選擇器，其樣式表排序：行級樣式 > 內嵌樣式表 > 外部樣式表（就近原則）
- 2、對於相同方式的樣式表，其選擇器排序：ID選擇器 > 類選擇器 > 標簽選擇器
- 3、外部樣式表的ID選擇器 > 內嵌樣式表的標簽選擇器
總結：就近原則。ID選擇器優先級最大。
舉例：如果都是內嵌樣式表，優先級的順序如下：（ID 選擇器 > 類選擇器 > 標簽選擇器）
另外還有兩個沖突的情況：
- 1、對同一個標簽，如果用到了多個相同的內嵌樣式表，它的優先級：定義的CSS樣式表中，誰最近，就用誰。
- 2、對於同一個標簽，如果引用了多個相同的外部樣式表，它的優先級：html文件中，引用樣式表的位置越近，就用誰。
例如：
題目演示
CSS的層疊性講完了，我們來做幾個題目吧。
題目1
題目2
題目3
題目4
權重問題深入
同一個標簽，攜帶了多個類名，有沖突：
這里需要補充兩種沖突的情況：
- 1、對同一個標簽，如果用到了了多個相同的內嵌樣式表，它的優先級： 定義的樣式表中，誰最近，就用誰。
- 2、對於同一個標簽，如果引用了多個相同的外部樣式表，它的優先級：html文件中，引用樣式表的位置越近，就用誰。
例如：（就近原則）
上圖中，文字顯示的顏色均為紅色。因為這和在標簽中的掛類名的書序無關，只和css的順序有關。
!important標記
來看個很簡單的例子：
上圖中，顯然id選擇器的權重最大，所以文字的顏色是紅色。
如果我們想讓文字的顏色顯示為綠色，只需要給標簽選擇器的加一個!important標記，此時其權重為無窮大。如下：
important是英語里面的“重要的”的意思。我們可以通過如下語法：
k:v !important;
來給一個屬性提高權重。這個屬性的權重就是無窮大。
注意，一定要注意語法的正確性。
正確的語法：
font-size:60px !important;
錯誤的語法：
font-size:60px; !important; 不能把!important寫在外面
font-size:60px important; 不能忘記感嘆號
!important標記需要強調如下3點：
（1）!important提升的是一個屬性，而不是一個選擇器
p{
color:red !important; 只寫了這一個!important，所以只有字體顏色屬性提升了權重
font-size: 100px ; 這條屬性沒有寫!important，所以沒有提升權重
}
#para1{
color:blue;
font-size: 50px;
}
.spec{
color:green;
font-size: 20px;
}
所以，綜合來看，字體顏色是red（聽important的）；字號是50px（聽id的）。
（2）!important無法提升繼承的權重，該是0還是0
比如HTML結構：
<div>
<p>哈哈哈哈哈哈哈哈</p>
</div>
有CSS樣式：
div{
color:red !important;
}
p{
color:blue;
}
由於div是通過繼承性來影響文字顏色的，所以!important無法提升它的權重，權重依然是0。
干不過p標簽，因為p標簽是實實在在選中了，所以字是藍色的（以p為准）。
(3)!important不影響就近原則
如果大家都是繼承來的，按理說應該按照“就近原則”，那么important能否影響就近原則呢？
答案是：不影響。遠的，永遠是遠的。不能給遠的寫一個important，干掉近的。
為了驗證這個問題，我們可以搞兩層具有繼承性的標簽，然后給外層標簽加一個!important，最終看看就近原則有沒有被打破。舉例如下：
PS：! important做站的時候，不允許使用。因為會讓css寫的很亂。
現在，我們知道層疊性能比較很多東西：
選擇器的寫法權重，誰離的近，誰寫在下面。
知識回顧
我們把以上內容和上一篇文章做一個簡單的知識回顧。
CSS屬性
css屬性，面試的時候會有筆試，筆試沒有智能感應的。
加粗，傾斜，下划線：
font-weight:bold;
font-style:italic;
text-decoration:underline;
背景顏色、前景色：
background-color:red;
color:red;
class和id的區別
class用於css的，id用於js的。
1）class頁面上可以重復。id頁面上唯一，不能重復。
2）一個標簽可以有多個class，用空格隔開。但是id只能有id。
各種選擇器(瀏覽器兼容性)
IE6層面兼容的選擇器： 標簽選擇器、id選擇器、類選擇器、后代、交集選擇器、並集選擇器、通配符。如下：
p
#box
.spec
div p
div.spec
div,p
*
IE7能夠兼容的：兒子選擇器、下一個兄弟選擇器。如下：
div>p
h3+p
IE8能夠兼容的：
ul li:first-child
ul li:last-child
css兩個性質
-
繼承性：好的事兒。繼承從上到下，哪些能？哪些不能？
-
層疊性：沖突，多個選擇器描述了同一個屬性，聽誰的？
再看幾個題目：
權重問題大總結，最后有個例子，比較難，暫時略掉。
我的公眾號
想學習代碼之外的軟技能？不妨關注我的微信公眾號：生命團隊（id：vitateam）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
