在寫css時，有時候會遇到瀏覽器中顯示的樣式和自己的預期不符合的情況，這是因為沒有理解css的層疊機制。
例如文件中有乙個p元素,用內聯樣式為他設定了顏色：
2023年10月20日
p
.date
層疊就是用來處理這種衝突的一種機制。
他有三**寶來幫助他完成這個任務：重要度、特殊性、先後順序。
首先決定使用規則的是重要度，層疊採用的重要度次序（序號越小越重要）：
1.標有！important的使用者樣式重要度更高的規則會覆蓋重要度較低的規則。2.標有！important的作者樣式
3.作者樣式
4.使用者樣式
5.瀏覽器/使用者**應用的樣式
那如果重要度相同呢？像上面的例子那樣，都是普通的作者樣式，他會怎麼處理呢？
這時候就要用到另外乙個概念，特殊性。更特殊的規則會成為優勝方。
與樣式**不同，css選擇器多種多樣，並且可以疊加使用，新增樣式的方法也很多（內聯，外部引用，繼承）。所以，為了更好的衡量乙個規則的特殊性，層疊機制為每個選擇器和方法都分配了乙個數值：
行內樣式：1000每個規則的特殊性就是他包含的選擇器和方式對應的值之和。所以在上面的例子中，p元素的顏色會是 #999.id選擇器：100
類、偽類、屬性選擇器：10
型別選擇器、偽元素選擇器：1
繼承：0
不管規則多麼複雜，這個法寶都能勝任。
例如：
2023年10月20日
13:20:00
#calendar p
#time
.date #time那麼如果換成這樣呢？
#calendar p
p#time
因為瀏覽器解析css文件時是自上而下的，所以當前兩個法寶都無法分清勝負時，靠後面的規則會取勝，所以它的顏色會是#fff
有了這三個法寶，層疊機制就可以處理一切衝突了。清楚地理解了他這三**寶，我們就能精準的**出每個元素在瀏覽器中的樣式了。
參考：《精通css》
層疊樣式表
簡介 1.什麼是css？層疊樣式表 cascading style sheet 2.有什麼用？html是頁面的骨架，而css就是對頁面骨架內容的修飾 3.為什麼要使用？樣式和內容寫在一起，會顯得非常臃腫，使用css可以將樣式單獨抽出來，可以提高開發效率 css提供很多html屬性無法替代的顯示效果 ...
層疊樣式表
網頁實際上是乙個多層的結構，通過css可以分別為網頁的每一層設定樣式，而最終我們看到的只有最上面一層。總之css就是用來涉惡之網頁中元素的樣式 在標籤內部通過style設定元素的樣式 存在的問題 使用內聯樣式，樣式只能對乙個標籤生效，如果希望影象到多個元素，則必須在每個元素中都複製一遍，並且，當樣式...
CSS層疊樣式表
一般說來所有樣式有下面的規則 第四個最有優先性 1 browser default 瀏覽器預設 2 external style sheet 外部樣式表 3 internal style sheet inside the 瀏覽器將從mystyle.css檔案中讀採樣式定義資訊，並根據它來格式化文件 ...