CSS中的權重指的是一個樣式被應用的優先級。當一個HTML元素有多個CSS樣式規則時,瀏覽器需要根據權重來決定哪個樣式應該被應用。
權重是通過選擇器的組合來計算的。選擇器的組合可以分成4個等級,以從高到低的順序排列:
行內樣式:1,0,0,0 ID選擇器:0,1,0,0 類選擇器、屬性選擇器和偽類選擇器:0,0,1,0 標簽選擇器和偽元素選擇器:0,0,0,1
如果兩個選擇器具有相同的權重,則最后在樣式表中出現的樣式將被應用。
下面的例子展示了如何使用不同的選擇器來設置權重:
div p { color: red; } /* 權重 0,0,0,2 */ .container p { color: blue; } /* 權重 0,0,1,1 */ #main p { color: green; } /* 權重 0,1,0,1 */ p { color: black; } /* 權重 0,0,0,1 */
在這個例子中,將會應用ID選擇器 #main p的樣式,因為它具有最高的權重。
了解CSS權重的計算方法可以幫助您編寫更具體和更有針對性的樣式規則,從而更好地控制您的頁面布局和設計。