在CSS中，選擇器的權(quán)重值決定了哪個(gè)樣式規(guī)則會(huì)被應(yīng)用到特定的HTML元素，當(dāng)多個(gè)選擇器應(yīng)用到同一個(gè)元素時(shí)，權(quán)重值更高的選擇器將覆蓋權(quán)重值較低的選擇器。

內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式是直接在HTML元素的style屬性中定義的樣式，內(nèi)聯(lián)樣式的權(quán)重值最高，因?yàn)樗苯討?yīng)用于元素，無(wú)需任何選擇器。

這是一個(gè)紅色的段落。

ID選擇器

ID選擇器以#開(kāi)頭，用于選擇具有特定ID的元素，ID選擇器的權(quán)重值為1000。

#myId {
    color: blue;
}

類選擇器、屬性選擇器和偽類選擇器

類選擇器以.開(kāi)頭，用于選擇具有特定類的元素，屬性選擇器以[開(kāi)頭，用于選擇具有特定屬性的元素，偽類選擇器如:hover、:active等，用于選擇處于特定狀態(tài)的元素，這些選擇器的權(quán)重值為100。

.myClass {
    color: green;
}
[datacustom] {
    color: orange;
}
a:hover {
    color: purple;
}

類型選擇器和偽元素選擇器

類型選擇器（也稱為元素選擇器）用于選擇特定類型的元素，偽元素選擇器如::before、::after等，用于選擇元素的特定部分，這些選擇器的權(quán)重值為1。

p {
    color: black;
}
::before {
    content: "插入內(nèi)容";
}

通用選擇器（*）和相鄰兄弟選擇器（+）

通用選擇器（*）用于選擇所有元素，相鄰兄弟選擇器（+）用于選擇緊跟在某個(gè)元素后面的兄弟元素，這些選擇器的權(quán)重值為0。

{
    color: gray;
}
h1 + p {
    color: brown;
}

組合選擇器

當(dāng)多個(gè)選擇器通過(guò)逗號(hào)分隔時(shí)，它們的權(quán)重值相加，一個(gè)類選擇器和一個(gè)ID選擇器組合在一起，總權(quán)重值為1000 + 100 = 1100。

#myId.myClass {
    color: pink;
}

!important 聲明

使用!important聲明可以提高樣式規(guī)則的權(quán)重值，這在覆蓋其他樣式或?yàn)g覽器默認(rèn)樣式時(shí)非常有用，過(guò)多地使用!important可能導(dǎo)致樣式難以維護(hù)。

.myClass {
    color: red !important;
}

相關(guān)問(wèn)答FAQs

Q1: 如果有兩個(gè)相同權(quán)重值的選擇器應(yīng)用到同一個(gè)元素，會(huì)發(fā)生什么？

A1: 如果兩個(gè)相同權(quán)重值的選擇器應(yīng)用到同一個(gè)元素，那么后定義的樣式規(guī)則將覆蓋先定義的樣式規(guī)則，這是因?yàn)镃SS樣式是按照它們?cè)跇邮奖碇械捻樞驊?yīng)用的。

Q2: 如何提高某個(gè)選擇器的權(quán)重值，但不使用!important聲明？

A2: 可以通過(guò)增加選擇器中的元素、類、ID等來(lái)提高權(quán)重值，可以將類選擇器更改為類型選擇器和類選擇器的組合，從而將權(quán)重值從100提高到101。

名稱欄目：css選擇器的權(quán)重值
網(wǎng)址分享：http://uogjgqi.cn/article/cdeojdp.html