最近準備重新學下CSS，找了MDN看了下基礎內容，做下總結！
CSS層疊
所謂CSS的層疊就是指當一個元素應用了兩條（或大於兩條）同級別的規則時，寫在最後的規則最終會生效
CSS優先順序
在CSS中如果對同一元素應用了不同的樣式，一般來講會是最後設定的樣式生效。
舉個例子：
<h1>This is a test</h1>
h1 {
color: red;
}
h1 {
color: blue;
}最終會顯示藍色。因為他們是同一級別的選擇器，後面的會覆蓋前面的。
記住一個優先順序權重就好了：
元素選擇器：會選擇頁面上所有該型別的元素，所以它的權重較低
類選擇器：它會選擇該頁面中有特定 class 屬性值的元素,所以它的權重相對高一些
ID選擇器：因為ID是要唯一的，所以它只會有一個同名ID的元素選中，所以它的權重最高
權重高的選擇器優先執行它的樣式，不會覆蓋，只有同一級別的選擇器才會出現後面覆蓋前面的情況。
特別說明：CSS的優先順序只針對 同一屬性 生效！！！(一定要注意是針對的相同屬性，並不會覆蓋所有規則)
CSS繼承
所謂CSS的繼承是指，一些設定在父級元素上的屬性可以被子元素繼承來，有些屬性不能被子元素繼承。
舉個例子：如果你在一個父元素上設定了 color 和 font-family, 則它的每個子元素都預設繼承了這2個屬性(子元素設定又重新設定了的不算，因為子元素的設定會覆蓋從父元素那繼承來的屬性值)
<p>As the body has been set to have a color of blue this is inherited through the descendants.</p>
<p>We can change the color by targetting the element with a selector, such as this <span>span</span>.</p>
body {
color: blue;
}
span {
color: black;
}最終結果如下圖所示：
一些屬性是不能繼承的 — 舉個例子如果你在一個元素上設定 width 50% ，所有的後代不會是父元素的寬度的50%!
瀏覽器如何計算CSS權重
一個選擇器的優先順序可以說是由四個部分相加 (分量)，可以認為是個十百千 — 四位數的四個位數：
千位： 如果宣告在 style 的屬性（內聯樣式）則該位得一分。這樣的宣告沒有選擇器，所以它得分總是1000。
百位： 選擇器中包含ID選擇器則該位得一分。
十位： 選擇器中包含類選擇器、屬性選擇器或者偽類則該位得一分。
個位：選擇器中包含元素、偽元素選擇器則該位得一分。
注: 通用選擇器 (*)，組合符 (+, >, ~, ‘ ‘)，和否定偽類 (:not) 不會影響優先順序。
舉個例子：
/* specificity: 0101 */
#outer a {
background-color: red;
}
/* specificity: 0201 */
#outer #inner a {
background-color: blue;
}
/* specificity: 0104 */
#outer div ul li a {
color: yellow;
}
/* specificity: 0113 */
#outer div ul .nav a {
color: white;
}
/* specificity: 0024 */
div div li:nth-child(2) a:hover {
border: 10px solid black;
}
/* specificity: 0023 */
div li:nth-child(2) a:hover {
border: 10px dashed black;
}
/* specificity: 0033 */
div div .nav:nth-child(2) a:hover {
border: 10px double black;
}註釋裡已經計算好了優先順序的值。
- 前面兩個選擇器都是連結背景顏色的樣式 — 第二個贏了使得背景變成藍色因為它多了一個ID選擇器：優先順序 201 vs. 101。
- 第三四個選擇器都是連結文字顏色樣式 — 第二個（第四個）贏了使得文字變成白色因為它雖然少一個元素選擇器，但是多了一個類選擇器，多了9分。所以優先順序是 113 vs. 104。
- 第5到7個選擇器都是滑鼠懸停時連結邊框樣式。第六個顯然輸給第五個優先順序是 23 vs. 24 — 少了個元素選擇器。 第七個，比第五第六都高 — 子選擇器數量相同，但是有一個元素選擇器變成類選擇器。所以最後優先順序是 33 vs. 23 和 24。
CSS中的 !important
有一個特殊的 CSS 可以用來覆蓋所有上面所有優先順序計算，不過需要很小心的使用 !important。他可以用於修改特定屬性的值，能夠覆蓋普通規則的層疊。
注： 覆蓋 !important 唯一的辦法就是另一個 !important 具有 相同優先順序 而且順序靠後，或者更高優先順序。
本作品採用《CC 協議》，轉載必須註明作者和本文連結