在CSS編碼過程中,有時會出現多個同名樣式,這時候CSS會按照一定的規則來選擇應用哪一個樣式。
首先,CSS會根據優先級(specificity)來判斷哪一個樣式更具體,從而選擇使用。優先級的計算方式是:每出現一次class或ID,就會給樣式加上一個權重,ID的權重是100,class的權重是10,標簽選擇器的權重是1。如果一個樣式里有多個選擇器,那么權重會相加,最終權重高的樣式會被應用。
/* 兩個同名樣式 */ .my-box { width: 200px; height: 200px; } .my-box { background-color: red; } /* 另一個同名樣式 */ .button { font-size: 16px; color: #fff; } #submit { background-color: blue; } .button { padding: 10px; }
在上面的示例中,如果my-box和button都是class,則按照CSS的規則,樣式表后者會覆蓋前者,所以最終.my-box元素的背景顏色是紅色,而不是默認的透明色。
在另一個同名樣式中,#submit是ID選擇器,所以它的權重最高,會覆蓋前面兩個class的樣式,所以最終的.button元素會有藍色背景色和10px的內邊距。
當同名樣式的權重相等時,CSS會根據源代碼中的順序來判斷哪一個樣式最后被定義,從而選擇使用。
為了避免同名樣式導致的問題,我們可以將CSS樣式進行合并,盡量避免出現多個同名樣式。
/* 合并同名樣式 */ .my-box { width: 200px; height: 200px; background-color: red; } .button { font-size: 16px; color: #fff; background-color: blue; padding: 10px; }
以上是同名樣式的一些基本知識和注意事項,希望能對有需要的朋友有所幫助。
上一篇css 向右的三角形
下一篇css3懸浮放大3圖片