CSS樣式層疊性是指當多個CSS規則應用于同一個元素時，根據規則的優先級以及規則的特異度，確定最終應用的樣式。
在Web開發中，樣式的層疊性非常重要。通過層疊性，開發者可以輕松地為網站設計和布局提供靈活性，并讓樣式更加統一和易于維護。理解樣式層疊性的原理和使用方法是每個前端開發者必備的基礎知識。
首先，CSS樣式層疊性是根據規則的優先級來決定哪個樣式將應用到元素上。優先級由高到低分為四個級別：
-
內聯樣式（Inline Style）：直接在HTML元素標簽的style屬性中指定的樣式具有最高優先級。例如：
Hello World!
ID選擇器（ID Selector）：使用#符號加上唯一的ID來指定的樣式。例如：#myId { color: blue; }
類選擇器和屬性選擇器（Class and Attribute Selectors）：使用.符號加上類名或使用[]符號加上屬性名來指定的樣式。例如：.myClass { color: green; } 或 [type="text"] { border: 1px solid black; }
標簽選擇器和偽類選擇器（Tag and Pseudo-class Selectors）：指定元素標簽名或者特定狀態的選擇器，如a、div:hover。例如：h1 { font-size: 20px; } 或者 a:hover { text-decoration: underline; }
其次，在相同優先級的規則中，特異度（Specificity）會影響樣式層疊性。特異度是一個用于衡量樣式規則的相對權重的值，它由四部分組成，分別是：內聯樣式的權重、ID選擇器的權重、類選擇器和屬性選擇器的權重、標簽選擇器和偽類選擇器的權重。其中，內聯樣式的權重最高，ID選擇器的權重次之，類選擇器和屬性選擇器的權重再次之，標簽選擇器和偽類選擇器的權重最低。特異度值越高的規則，優先級越高，會覆蓋特異度值較低的規則。
除了以上兩點，還有一些其他的規則和特殊情況會影響CSS樣式的層疊性：
-
!important規則：在樣式中使用!important規則可以將該樣式規則的優先級提升到最高。使用!important規則需謹慎，因為過度使用會導致CSS代碼難以維護。
繼承性：某些樣式屬性具有繼承性，即子元素會繼承父元素的樣式。當子元素和父元素都有相同屬性的樣式時，子元素的樣式會覆蓋父元素的樣式。
下面是一個具體的CSS代碼示例，用以說明樣式層疊性的運用：
/* 內聯樣式 */
p {
color: red !important;
}
/* ID選擇器 */
#myId {
color: blue;
}
/* 類選擇器和屬性選擇器 */
.myClass {
color: green;
}
/* 標簽選擇器和偽類選擇器 */
a {
color: purple;
}
Hello World!
Visit us
登錄后復制
在上面的示例中，首先我們給p元素添加了一個具有最高優先級的內聯樣式，設置其顏色為紅色，并使用了!important規則。接著，我們為div元素設置了一個ID選擇器樣式，設置其顏色為藍色。然后，我們為div元素添加了一個類選擇器樣式和一個標簽選擇器樣式，顏色分別為綠色和紫色。
最終，p元素的顏色將應用內聯樣式的紅色，而div元素的顏色將應用ID選擇器的藍色樣式。因為特異度規則，類選擇器樣式和標簽選擇器樣式將被忽略。所以，最終輸出的結果是紅色的“Hello World！”和藍色的“Visit us”。
總結來說，CSS樣式層疊性是通過規則的優先級和特異度來確定最終應用的樣式。了解層疊性的原理，并學會靈活運用層疊性的規則，將有助于開發者更好地控制和管理CSS樣式，實現網站的各種設計需求。
