CSS層疊特征

CSS層疊是指一個元素的樣式定義受到了多個選擇器定義的影響，并且這些選擇器具有不同的權重。這些選擇器定義會根據權重的不同而有所區別。

CSS權重是一種用于限制選擇器優先級的概念。每個選擇器都有權重，權重越高的選擇器將優先被應用到元素。

下面是CSS選擇器權重的計算規則：

元素選擇器的權重為1
類、偽類和屬性選擇器的權重為10
ID選擇器的權重為100
行內樣式的權重為1000
繼承的樣式的權重為0

可以通過指定!important來提高樣式聲明的優先級，以覆蓋其他樣式聲明。

下面是一些應用CSS層疊的例子：

/* 樣式1 */
p {
color: red;
}
/* 樣式2 */
#my-para {
color: blue;
}
/* 樣式3 */
p.my-class {
color: green;
}
/* 樣式4 */
.my-class {
color: purple !important;
}

在這個例子中，如果一個p元素同時擁有類名my-class和id值為my-para，那么它將被應用樣式4。

實際上，CSS層疊是Web開發中非常重要的一個概念，它可以幫助開發者在設計和維護Web頁面時更加靈活地控制各個元素的樣式。