今天閱讀《CSS設計指南》，裡面提及的查理版簡單層疊要點，發現與自身的驗證結果不一緻，便試着将我得出的結論記錄下來，同時将相關知識總結一下。這隻是一個新手的一點思考，如有謬誤，還請大家指正。另外，本人覺得《CSS設計指南》是一本很好的書籍，此文更多隻是想記錄自己一點獨特的思考，對此書并無意見。
我對CSS樣式層疊規則的總結
0、若本身設定了樣式，則繼承的樣式無效；我認為也可以簡單了解為繼承的特指度為0；
1、！important具有最高權限，隻要聲明中加上這一句，其他樣式都會被層疊；我認為可以簡單了解為其特指度為無窮大；
2、行内式僅次于！important；（這一點與書中所說不一緻）
3、除上面三者外，其餘樣式按照(I-C-E)計算特指度（下文将簡單介紹）。特指度高的層疊特指度低的；
4、同特指度的，後面的層疊前面的樣式。（這一點與書中所說的細節也有點不同）
我的結論與《CSS設計指南》查理版簡單層疊要點有哪些差異
1、書中查理版簡單層疊要點指出特指度更高的樣式層疊其他樣式，包括行内式，真的是這樣嗎？我驗證的結果顯示并非如此。
以下兩塊代碼，按照書中所說，段落應該是藍色，但是結果卻是紅色。事實上我試了各種寫法，均無法層疊行内式（除了！important;）這證明行内式會将特指度更高的樣式層疊，或者說行内式的特指度是僅次于！important。
<style>
#box1 #box2 #box3 #box4 p.p1 {
color:blue;
}
</style>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<p class="p1" style="color:red">你好我好大家好</p>
</div>
</div>
</div>
</div>
2、《CSS設計指南》的查理版簡單層疊要點指出行内樣式勝過包嵌入樣式，嵌入樣式勝過連結樣式。但我發現這個并不一定。我先寫嵌入式，再寫外鍊式，連結樣式将嵌入式給層疊了。不過這種寫法大概不規範吧。但這說明了同特指度的層疊實際上是按照浏覽器讀取的順序，後讀取的層疊早讀取的，而并非一定是嵌入樣式勝過連結樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p.p1 {color:blue;}
</style>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div id="box4">
<p class="p1">你好我好大家好</p>
</div>
</body>
</html>
外鍊：
p.p1 {
color:purple;
}
(I-C-E)計算特指度
即ID權重為100，class權重為10，element标簽權重為1，特指度就是将樣式中選擇器裡用到的id、class、element按權重相加得出的值。
如：p.p1的特指度是1+10=11。
另外：實際上三者權重為1/10/100估計隻是一個友善估算的約值，而非準确值。
例如：12個element+1個class，按照上面的方法計算特指度是22，
而兩個class的特指度是20，但實際上後者的特指度高于前者。
這種極端情況并不常見，在大多數情況下(I-C-E)計算特指度仍然适用。
我對CSS樣式層疊的一點補充
上面總結了我個人認為的層疊規則，關于若本身設定了樣式，則繼承的樣式無效，我覺得可以這樣了解：
這是很自然的呀，長輩給你介紹了一個女孩，而你已經有女朋友了，那肯定是選自己女朋友做老婆更自然一點吧。
終于寫完了人生第一個部落格，試了一下markdown，希望是一個好的開始吧。