※ 樣式規則：
規則一：
名稱一樣，後寫的樣式會寫掉前面的樣式。
範例一：
前面的樣式：.color5 {
background-color: #F3D4D4;
height: 300px;
}
顯示畫面：
後面的樣式：
.color5 {
background-color: #F3D4D4;
height: 300px;
}
.color5 {
background-color: #000;
}
顯示畫面：
開發工具人員檢查：
規則二：
這張圖是在講 CSS 的「權重（Specificity）」概念，是決定哪一段樣式優先套用的規則之一。
對應到上面的五段權重：
!important（紅色）：不算進權重，但會強制覆蓋其他樣式。style（藍色）：內嵌樣式，如 （div style="color: red;"）。#id（橘色）：ID 選擇器（如#header），權重高。.class（綠色）：類別選擇器，中間權重。element（粉色）：元素選擇器，權重最低。
範例二：
/* 0-0-0-1-0 */
.colorpalette {
/* border: 1px solid #000; */
width: 400px;
background-color: rgb(173, 148, 148);
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}
/* 0-0-0-0-1 */
div {
width: 800px;
}
顯示畫面：因為權重比的關係，所以結果不變。
開發工具人員檢查：
顯示畫面：改變權重比的關係，結果就改變。
/* 0-0-0-1-1 */
div.colorpalette {
width: 800px;
}
開發工具人員檢查：
範例三：
/* 0-0-1-0-0 */
#John {
width: 1200;
}
顯示畫面：改變權重比的關係，結果就改變。
開發工具人員檢查：
style屬性：index.html
<!-- 0-1-0-0-0 -->
<div id="John" class="colorpalette" style="width: 1500px;">
顯示畫面：
開發工具人員檢查：
! important：style.css
/* 1-0-0-0-1 */
div {
width: 600px !important;
}
顯示畫面：
開發工具人員檢查：
