在寫(xiě)CSS樣式時(shí)，我們經(jīng)常會(huì)遇到一個(gè)問(wèn)題：多個(gè)CSS屬性同時(shí)作用于一個(gè)元素時(shí)該如何選擇優(yōu)先級(jí)。這個(gè)問(wèn)題牽扯到CSS樣式的優(yōu)先級(jí)，而在DOM中，優(yōu)先級(jí)的選擇根據(jù)不同選擇器的權(quán)重來(lái)進(jìn)行。

權(quán)重的計(jì)算規(guī)則如下：
- 對(duì)于每個(gè)選擇器的不同組成部分分別進(jìn)行權(quán)重計(jì)算；
- 對(duì)不同組成部分所得的權(quán)重值按位數(shù)依次排列；
- 對(duì)于相同位數(shù)的權(quán)重，后出現(xiàn)的選擇器權(quán)重值較大，即后者優(yōu)先級(jí)更高。
以下是不同組成部分的權(quán)重計(jì)算規(guī)則：
- 指定一個(gè)!important: 權(quán)重值為無(wú)窮大(∞);
- 寫(xiě)于元素內(nèi)部的style屬性: 權(quán)重值為1,0,0,0;
- 每個(gè)ID選擇器: 權(quán)重值為0,1,0,0;
- 每個(gè)類、偽類、屬性選擇器: 權(quán)重值為0,0,1,0;
- 每個(gè)元素、偽元素選擇器: 權(quán)重值為0,0,0,1;
- 通配符、相鄰兄弟、子選擇器: 權(quán)重值為0,0,0,0。
舉個(gè)例子：假如一個(gè)元素應(yīng)用了以下兩條CSS屬性：
p {
color: red !important;
font-size: 16px;
}
則其權(quán)重值為∞+0+0+0+0=∞(顏色優(yōu)先級(jí)更高)。
再比如，如果有以下兩個(gè)選擇器同時(shí)在同一元素上生效：
#myId {
color: red; /* 權(quán)重值為0,1,0,0 */
}
div p {
color: blue; /* 權(quán)重值為0,0,0,2 */
}
則由于后者的權(quán)重值更大，所以p元素的顏色屬性會(huì)被覆蓋為blue。
知道CSS樣式優(yōu)先級(jí)的選擇規(guī)則，我們就可以在編寫(xiě)CSS樣式時(shí)避免出現(xiàn)優(yōu)先級(jí)沖突的情況，從而更好地進(jìn)行樣式排版。