CSS層疊機制是指在頁面中，同一元素可以同時有多個設置樣式的來源，這些樣式來源之間有優先級規則，從而決定應用于元素的最終樣式。

/* 樣式來源一：內聯樣式 */
這段文字的顏色是紅色的
/* 樣式來源二：ID選擇器 */
#example {
color: green;
}
/* 樣式來源三：類選擇器 */
.example {
color: blue;
}

上述代碼中，如果一個元素同時擁有內聯樣式、ID選擇器樣式和類選擇器樣式，那么CSS層疊機制會按照以下優先級規則來決定最終應用于元素的樣式：

1. 內聯樣式的優先級最高，如果存在內聯樣式，其他樣式來源都將被忽略。
2. ID選擇器的優先級次之，如果一個元素同時匹配多個ID選擇器，優先級相同，則后寫的ID選擇器樣式優先級更高。
3. 類、偽類和屬性選擇器的優先級較低，如果一個元素同時匹配多個選擇器，則優先級相同，則后寫的選擇器優先級更高。
4. 標簽選擇器和通配符選擇器的優先級最低，如果一個元素同時匹配多個標簽選擇器或通配符選擇器，則優先級相同，則后寫的選擇器優先級更高。

了解了CSS層疊機制的優先級規則，我們就能更好地控制頁面的樣式：

這段文字的顏色是紅色的，因為內聯樣式優先級最高；類選擇器樣式被忽略，因為ID選擇器樣式優先級更高；ID選擇器樣式被應用，文字變為綠色。

通過學習CSS層疊機制，我們不僅理解了樣式優先級的規則，還能夠編寫更加靈活、易于維護的CSS代碼。