CSS層疊性(Cascading)是指在同一元素上應(yīng)用多個(gè)樣式時(shí)，瀏覽器按照一定的規(guī)則進(jìn)行樣式的應(yīng)用和覆蓋，從而影響元素的最終樣式。權(quán)重(Specificity)指的是CSS選擇器的優(yōu)先級(jí)，用于確定應(yīng)用的樣式哪一個(gè)具有最高的優(yōu)先權(quán)。
權(quán)重的計(jì)算方法如下，按照以下規(guī)則逐級(jí)比較：
1. 選擇器的類型(元素選擇器、類選擇器、ID選擇器等)，根據(jù)表格計(jì)算權(quán)重，優(yōu)先級(jí)從高到低為：
- ID選擇器：權(quán)重為100。
- 類選擇器、屬性選擇器和偽類選擇器：權(quán)重為10。
- 元素選擇器和偽元素選擇器：權(quán)重為1。
2. 如果兩個(gè)選擇器都有一樣的權(quán)重，則按照順序進(jìn)行覆蓋，后定義的樣式會(huì)覆蓋先定義的樣式。如果樣式定義了!important，優(yōu)先級(jí)最高。
3. 組合選擇器中多個(gè)選擇器的權(quán)重相加。
舉例說(shuō)明：
假設(shè)有以下三個(gè)選擇器：
如果同時(shí)應(yīng)用于同一元素，根據(jù)選擇器的類型計(jì)算權(quán)重，可得到：
因此，若樣式規(guī)則沖突產(chǎn)生，則根據(jù)權(quán)重逐級(jí)比較，權(quán)重值較高的樣式優(yōu)先生效。但需要注意的是，建議盡量避免使用ID選擇器，因?yàn)樗菀讓?duì)CSS樣式的復(fù)用和維護(hù)造成影響。
京公網(wǎng)安備 11010802030320號(hào)