css優(yōu)先級是怎么計算的

這篇文章將為大家詳細講解有關(guān)css優(yōu)先級是怎么計算的，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

對于css樣式優(yōu)先級理解它的最好方法是從一個例子開始。然后我們將仔細研究如何計算實際優(yōu)先級以確定哪個選擇器優(yōu)先。

下面是一個簡單的無序列表：

<ul id="summer-drinks">
   <li>汽水</li>
   <li>啤酒</li>
   <li>果汁</li></ul>

如果現(xiàn)在你要指定其中一種你喜歡的飲料并改變它的樣式。你可以通過list元素上的類名來應(yīng)用它。

<ul id="summer-drinks">
   <li class="favorite">汽水</li>
   <li>啤酒</li>
   <li>果汁</li></ul>

現(xiàn)在你就可以在css中為它添加樣式

.favorite {
  color: red;
  font-weight: bold;
}

然后你看你的實現(xiàn)效果會發(fā)現(xiàn)這個樣式它沒有作用！你選擇添加樣式的飲料并沒有變成紅色，字體也沒有加粗

仔細觀察css中的代碼你就會發(fā)現(xiàn)，有兩個選擇器

ul#summer-drinks li {
   font-weight: normal;
   font-size: 12px;
   color: black;}

兩個不同的CSS選擇器都定義了文本顏色和字體重量。字體大小只有一個聲明，所以很明顯一個會生效。這些不是“沖突”，但瀏覽器確實需要決定這些定義了的內(nèi)容中需要實現(xiàn)哪一個。這就需要通過遵循一套標準的優(yōu)先級規(guī)則來實現(xiàn)。

這可能會讓一些初學者感到困惑，因為他們尚未完全解決這個問題。他們可能會認為因為.favorite語句“ 在CSS中更進一步 ”，或者因為class =“favorite ”在HTML中“ 更接近實際文本 ”，將是優(yōu)先的。實際上，CSS中選擇器的順序確實發(fā)揮了作用，當優(yōu)先級完全相同時，后來定義的內(nèi)容實際上是先執(zhí)行的，例如：

.favorite {
   color: red;
}
.favorite {
   color: green;
}

執(zhí)行的結(jié)果字體的顏色會變綠

這里的要點是你希望盡可能具體的理解。即使有上面提到的簡單例子，最終你會明白，僅僅使用一個類名來定位“最喜歡的飲料”并不會削減它，或者即使它確實起作用也不會很安全?？梢允褂靡韵路椒ň唧w定義：

ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

這就是我所說的“具體而言才有意義”。你實際上可能更具體，并使用這樣的東西：

html body div#pagewrap ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

但有時候代碼會很長。它會使的CSS代碼的閱讀性降低，并沒有產(chǎn)生任何實際好處。為“.favorite”類提取特異性值的另一種方法是使用！important聲明。

.favorite {
  color: red !important;
  font-weight: bold !important;
}

我曾經(jīng)聽說過！important是CSS的絕地思維技巧。也確實如此，您可以通過使用它來強制您的元素樣式。但是，通過大幅提高特定選擇者使用的特殊性，將會產(chǎn)生一些不必要的問題。如果被錯誤理解，那么！important聲明很容易被濫用。它最好用于保持CSS整潔，例如，您知道具有特定類選擇器的元素應(yīng)該使用某種樣式集。相反，不僅僅用作快速的使用方法來覆蓋某些東西的樣式，而不是弄清楚原始作者如何構(gòu)造和使用CSS。

我的一個經(jīng)典例子是：

.last {
   margin-right: 0 !important;
}

計算CSS選擇器優(yōu)先級

為什么我們第一次嘗試更改顏色和字體重量失敗了？正如我們所了解的那樣，這是因為簡單地使用類名本身具有較低的優(yōu)先級，并且被另一個選擇器覆蓋，該選擇器使用ID值定位無序列表。該句中的重要詞語是類和id。CSS對類和ID應(yīng)用了截然不同的優(yōu)先級權(quán)重。事實上，ID具有無限的優(yōu)先級價值！也就是說，沒有任何類別的優(yōu)先級可以超過ID。

我們來看看數(shù)字的實際計算方式：

換一種說法：

如果元素具有內(nèi)聯(lián)樣式，則自動1勝（1,0,0,0分）

對于每個ID值，應(yīng)用0,1,0,0個點

對于每個類值（或偽類或?qū)傩赃x擇器），應(yīng)用0,0,1,0個點

對于每個元素引用，應(yīng)用0,0,0,1點

您通?？梢宰x取值，就好像它們只是一個數(shù)字，如1,0,0,0是“1000”，因此顯然勝過0,1,0,0或“100”的特異性。逗號是在那里提醒我們，這不是一個真正的“基礎(chǔ)10”系統(tǒng)，因為你在技術(shù)上可以具有類似0,1,1,3,4的優(yōu)先級值 - 并且“13”不會溢出基礎(chǔ)10系統(tǒng)會。

樣本計算

not（）sort-of-pseudo-class本身不具有任何優(yōu)先級，只將parens中的內(nèi)容添加到優(yōu)先級值中。

重要說明

通用選擇器（*）沒有優(yōu)先級值（0,0,0,0）

偽元素（例如：第一行）獲得0,0,0,1不像他們的偽類兄弟獲得0,0,1,0

偽類：not（）本身不具有任何優(yōu)先級，只是它的括號內(nèi)的內(nèi)容。

附加CSS屬性值的！important值是自動獲勝。它甚至覆蓋了標記中的內(nèi)聯(lián)樣式?？梢愿采w！important值的唯一方法是使用CSS中稍后聲明的另一個！important規(guī)則，否則具有相同或更大的特異性值。您可以將其視為將特定值添加1,0,0,0,0。

關(guān)于css優(yōu)先級是怎么計算的就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。