CSS中如何計算選擇器的權(quán)重值

這篇文章主要為大家展示了“CSS中如何計算選擇器的權(quán)重值”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS中如何計算選擇器的權(quán)重值”這篇文章吧。

CSS 選擇器權(quán)重值

CSS 具有自己的優(yōu)先級計算方法，而不僅僅是行間>內(nèi)部>外部、ID>class>元素

1. 樣式類型

行間樣式

<h2 style="font-size:12px;color:#000;">我的行間CSS樣式。</h2>

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

<style type="text/css">
  h2{font-size:12px;
      color:#000;
      }
</style>

外部樣式

<link rel="stylesheet" href="css/style.css">

2. 選擇器類型

3. 權(quán)重計算規(guī)則

1. 內(nèi)聯(lián)樣式，如: style="..."，權(quán)值為1000。

2. ID選擇器，如：#content，權(quán)值為0100。

3. 類，偽類、屬性選擇器，如.content，權(quán)值為0010。

4. 類型選擇器、偽元素選擇器，如div p，權(quán)值為0001。

5. 通配符、子選擇器、相鄰選擇器等。如* > +，權(quán)值為0000。

6. 繼承的樣式?jīng)]有權(quán)值

4. 比較規(guī)則

1,0,0,0 > 0,99,99,99。也就是說從左往右逐個等級比較，前一等級相等才往后比。

無論是行間、內(nèi)部和外部樣式，都是按照這個規(guī)則來進(jìn)行比較。而不是直觀的行間>內(nèi)部>外部樣式；ID>class>元素。之所以有這樣的錯覺，是因為確實行間為第一等的權(quán)重，所以它的權(quán)重是最高的。而內(nèi)部樣式可能一般寫在了外部樣式引用了之后，所以覆蓋掉了之前的。

在權(quán)重相同的情況下，后面的樣式會覆蓋掉前面的樣式。

通配符、子選擇器、相鄰選擇器等的。雖然權(quán)值為0000，但是也比繼承的樣式優(yōu)先，0 權(quán)值比無權(quán)值優(yōu)先。

5. !important

!important 的作用是提升優(yōu)先級，換句話說。加了這句的樣式的優(yōu)先級是最高的（比內(nèi)聯(lián)樣式的優(yōu)先級還高)。

<style>
    p{color:red !important;}
</style>
<p style="color:blue;">我顯示紅色</p>　

ie7+和別的瀏覽器對important的這種作用的支持度都很好。只有ie6-有些bug

p{
  color:red !important;
  color:blue;    
}        //會顯示blue

但是這并不說明ie6不支持important，只是支持上有些bug。

p{color:red !important;  }
p{color:blue;}        // 這樣就會顯示的是red。說明ie6還是支持important的

當(dāng) !important 規(guī)則被應(yīng)用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明，無論它處在聲明列表中的哪個位置。盡管如此，!important 規(guī)則還是與優(yōu)先級毫無關(guān)系。使用 !important 不是一個好習(xí)慣，因為它改變了你樣式表本來的級聯(lián)規(guī)則，從而難以調(diào)試。

在使用 !important 時需要注意：

1. Never 永遠(yuǎn)不要在全站范圍的 css 上使用 !important

2. Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者YUI ）的特定頁面中使用 !important

3. Never 永遠(yuǎn)不要在你的插件中使用 !important

4. Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是 !important

以上是“CSS中如何計算選擇器的權(quán)重值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！