CSS權重疊加教程
在CSS中，當多個選擇器同時作用于同一個元素時，就會出現權重疊加的情況。權重是用來決定哪個選擇器對同一個元素最終生效的指標，一般用一個數字表示。了解CSS權重疊加規則對于編寫正確的CSS樣式非常重要。
選擇器的權重
在CSS中，每個選擇器都有一個權重值，權重值越大的選擇器對元素的影響越大。
以下列出了不同類型的選擇器及其對應的權重值：
- 內聯樣式：權重值為1000
- 標志選擇符：權重值為1
- 類選擇符、屬性選擇符、偽類選擇符：權重值為10
- 標簽選擇符、偽元素選擇符：權重值為100
- 通配選擇符、組合器：權重值為0
請注意，在CSS中使用!important會覆蓋所有其他樣式，它的權重值也是無窮大。
權重疊加規則
當多個選擇器作用于同一個元素時，它們的權重將會疊加計算。疊加的規則如下：
- 相同類型的選擇器，權重會相加
- 不同類型的選擇器，權重會分別相加，最終權重值高的選擇器會生效
- 如果兩個或多個選擇器的權重值相同，則按照樣式表中出現的順序來決定生效的樣式
示例代碼：

/* 內聯樣式 */
<p style="color: red;">這是一段文字</p>
/* ID選擇器+標簽選擇器 */
#myDiv p {
color: blue;
}
/* 類選擇器 */
.article-text {
font-size: 16px;
}
/* 偽類選擇器 */
a:hover {
color: green;
}
/* !important */
.btn {
color: black !important;
}

在上面的示例代碼中，如果我們想要應用于一個段落元素的樣式是什么顏色的呢？權重疊加規則如下：
- 內聯樣式：1000
- ID選擇器+標簽選擇器：101
- 類選擇器：10
- 偽類選擇器：10
- !important：無窮大
因此，最終的樣式將會是黑色，因為.btn選擇器使用了!important。
結論
了解CSS權重疊加規則非常重要，它可以幫助我們避免選擇器沖突和編寫混亂的CSS代碼。我們應該盡可能地使用類選擇器和屬性選擇器，以便我們的樣式更容易維護，而不是使用ID選擇器或!important。