CSS樣式層疊性是指當多個CSS規則應用于同一個元素時，根據規則的優先級以及規則的特異度，確定最終應用的樣式。

在Web開發中，樣式的層疊性非常重要。通過層疊性，開發者可以輕松地為網站設計和布局提供靈活性，并讓樣式更加統一和易于維護。理解樣式層疊性的原理和使用方法是每個前端開發者必備的基礎知識。

首先，CSS樣式層疊性是根據規則的優先級來決定哪個樣式將應用到元素上。優先級由高到低分為四個級別：

其次，在相同優先級的規則中，特異度（Specificity）會影響樣式層疊性。特異度是一個用于衡量樣式規則的相對權重的值，它由四部分組成，分別是：內聯樣式的權重、ID選擇器的權重、類選擇器和屬性選擇器的權重、標簽選擇器和偽類選擇器的權重。其中，內聯樣式的權重最高，ID選擇器的權重次之，類選擇器和屬性選擇器的權重再次之，標簽選擇器和偽類選擇器的權重最低。特異度值越高的規則，優先級越高，會覆蓋特異度值較低的規則。

除了以上兩點，還有一些其他的規則和特殊情況會影響CSS樣式的層疊性：

下面是一個具體的CSS代碼示例，用以說明樣式層疊性的運用：

  
    /* 內聯樣式 */
    p {
      color: red !important;
    }
  
    /* ID選擇器 */
    #myId {
      color: blue;
    }
  
    /* 類選擇器和屬性選擇器 */
    .myClass {
      color: green;
    }
  
    /* 標簽選擇器和偽類選擇器 */
    a {
      color: purple;
    }
  


  
    
Hello World!
    Visit us
  

在上面的示例中，首先我們給元素添加了一個具有最高優先級的內聯樣式，設置其顏色為紅色，并使用了規則。接著，我們為元素設置了一個ID選擇器樣式，設置其顏色為藍色。然后，我們為元素添加了一個類選擇器樣式和一個標簽選擇器樣式，顏色分別為綠色和紫色。

最終，元素的顏色將應用內聯樣式的紅色，而元素的顏色將應用ID選擇器的藍色樣式。因為特異度規則，類選擇器樣式和標簽選擇器樣式將被忽略。所以，最終輸出的結果是紅色的“Hello World！”和藍色的“Visit us”。

來說，CSS樣式層疊性是通過規則的優先級和特異度來確定最終應用的樣式。了解層疊性的原理，并學會靈活運用層疊性的規則，將有助于開發者更好地控制和管理CSS樣式，實現網站的各種設計需求。