CSS權(quán)重優(yōu)先級是如何計(jì)算的?

　　在CSS中，權(quán)重(specificity)是用來確定樣式規(guī)則應(yīng)用優(yōu)先級的一種機(jī)制。權(quán)重是由選擇器的組合確定的，其中每個(gè)選擇器都有一個(gè)特定的權(quán)重值。當(dāng)多個(gè)規(guī)則應(yīng)用于同一元素時(shí)，瀏覽器使用權(quán)重來確定哪一個(gè)規(guī)則應(yīng)該覆蓋另一個(gè)規(guī)則。

　　CSS權(quán)重通常由四個(gè)部分組成，按照從最高優(yōu)先級到最低優(yōu)先級的順序?yàn)椋?/p>

　　1.內(nèi)聯(lián)樣式(Inline styles):

　　應(yīng)用于元素的style屬性。權(quán)重值為1000。

<div style="color: red;">This is red text</div>

　　2.ID選擇器(ID selectors):

　　通過ID選擇器選擇的元素。權(quán)重值為100。

#myElement {
  color: blue;
}

<div id="myElement">This is blue text</div>

　　3.類選擇器、屬性選擇器和偽類選擇器(Class selectors, Attribute selectors, and Pseudo-class selectors):

　　權(quán)重值為10。

.button {
  background-color: green;
}

<button class="button">Click me</button>

　　4.元素選擇器和偽元素選擇器(Element selectors and Pseudo-element selectors):

　　權(quán)重值為1。

　　當(dāng)應(yīng)用多個(gè)規(guī)則時(shí)，瀏覽器將選擇具有最高權(quán)重的規(guī)則。如果權(quán)重相同，則后定義的規(guī)則將覆蓋先定義的規(guī)則。

　　舉例說明權(quán)重計(jì)算的方法：

#myElement {
  color: red; /* 權(quán)重值為 100 */
}

.button {
  color: blue; /* 權(quán)重值為 10 */
}

p {
  color: green; /* 權(quán)重值為 1 */
}

　　如果一個(gè)元素同時(shí)具有ID為myElement、類為button，且為

　　元素，那么最終顏色將是紅色，因?yàn)镮D選擇器的權(quán)重值最高。如果兩個(gè)規(guī)則具有相同的權(quán)重，則后定義的規(guī)則將覆蓋前面的規(guī)則。