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