關於CSS中繼承、特殊性、重要性、層疊的理解
例：p{color;blue;}
<p>我愛<span>前端開發</span>。</p>
顯示的效果為：p中的文字和span中的文字都被設定為了藍色，即<span>標籤繼承了<p>標籤的樣式（注：有些CSS樣式是不具有繼承性的，如：邊框、邊界、背景、定位、佈局等）
注：繼承的好處在於恰當地使用繼承可以減少程式碼中的選擇器數量，降低複雜性，但如果大量元素繼承各種樣式的話，那麼在判斷樣式的來源時將會變得十分的困難。
CSS特殊性、重要性、層疊：看來很多網上的文章，貌似很多人對著幾個性質的理解都是對書籍上面的原話進行復制貼上，沒有自己原話的理解，按我個人的理解，這3個屬性應該放在一起進行討論比較以便於理解，因為在我看來這3個性質雖然有所不同但卻又相互關聯的，共同點都是討論和解決當同一個元素在面對多個樣式出現衝突時，元素最終是以哪個樣式為標準進行顯示？
先說特殊性：什麼是特殊性呢？在CSS中，選擇元素可以有很多種規則，而每種規則都有自己的選擇器，對於同一個元素而言，當有兩種或者兩種以上的規則來進行選擇時，最終到底是哪一種規則勝出呢？：
例：h1{color:red;}
body h1{color:blue;}
例子中h1最後是以哪一種顏色顯示呢？答案是通過計算和比較每種規則的特殊性的權重值，將每個規則裡面的選擇器的權重值進行相加，然後通過比較相加的結果，最後特殊性權重值最高的規則勝出。
注：1.標籤的權值為1，類選擇器的權值為10，id選擇器的權值最高為100；
2.通用選擇器的特殊性為0；
3.繼承完全沒有特殊性！
4.o特殊性也比沒有特殊性的優先值高！
需要注意的是：當應用於同一元素時，內聯樣式宣告的特殊性要高於id選擇器宣告的特殊性：
例：h1 #swarp{color:red;}
<h1 id="swarp" style="color:blue;">WEB</h1>
最終“WEB”的顏色為藍色。
同樣，當應用於同一元素時，內部樣式宣告的特殊性也比id選擇器要高：
例：<style type="text/css">
#content{color:red;}
p{color:blue;}
</style>
</head>
<body>
<div id="content">
<p>WEB</p>
</div>
</body>
最終“WEB”的顏色也為藍色。
說一下重要性：有時候某個樣式宣告可能非常重要，超過了其他的宣告，需要給它賦予最高的權重值，這時候就要用到重要性宣告：!important
p{color:red!important;}
需要注意的是:
1.!important必須要寫在屬性的分號之前才能起作用，尤其是該屬性有多個關鍵詞語時，否則無效！
2.宣告權重：讀者的重要宣告>創作人員的重要宣告>創作人員的正常宣告>讀者的正常宣告>使用者代理宣告
接下來講層疊：由上面我們知道特殊性解決的是當用不同特殊性的規則來選擇元素時最終哪一種規則會勝出的問題，而如果兩個或者多個特殊性相同的規則應用於同一個元素時，那麼這個問題和衝突又該如何解決呢？這時就需要運用到層疊了。那什麼是層疊呢？：層疊是指CSS中對同一個元素或者同一個網頁應用多個樣式或者樣式表的能力，當這些具有相同權重值的樣式同時應用於同一個元素時，處於最後的樣式將會被應用：
例：p{color:red;}
p{color:blue;}
<p>我愛前端</p>
最終“我愛前端”的顏色為藍色
所以對於前面樣式的優先順序就比較好理解了：
內聯樣式表（標籤內部）> 嵌入樣式表（當前檔案中）> 外部樣式表（外部檔案中）
另外一個優先順序也要注意，也就是關於連結的 ：a:link>a:visited>a:hover>a:focus>a:active
總結：由上面我們可以知道，特殊性、重要性以及層疊都是用來解決當多個樣式應用於同一元素時出現的衝突問題。當不同特殊性的樣式應用於同一元素時，我們需要用到特殊性，根據不同的特殊性的權重值來判斷，同時還要注意內聯式宣告的特殊性要高於id選擇器宣告的特殊性，另外如果有重要性的出現的情況也要考慮；而當多個特殊性權值相同的樣式應用於同一元素時，需要用層疊去解決，同樣如果有重要性出現的情況也要注意。所以在解決多個樣式出現衝突時，不能只考慮特殊性或者還是層疊的問題，應該要結合著來看，按權重、來源、特殊性和順序排序。
（PS：以上是自己的個人感悟，不知道這樣總結和理解的對不對？歡迎各位能一起討論，指出理解得錯誤的地方以及不足之處，謝謝！）