css優先級如何計算

本文小編為大家詳細介紹“css優先級如何計算”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css優先級如何計算”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

　　<ulid="summer-drinks">

　　<li>汽水</li>

　　<li>啤酒</li>

　　<li>果汁</li></ul>

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

　　<ulid="summer-drinks">

　　<liclass="favorite">汽水</li>

　　<li>啤酒</li>

　　<li>果汁</li></ul>

　　現在你就可以在css中為它添加樣式

　　.favorite{

　　color:red;

　　font-weight:bold;

　　}

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

　　仔細觀察css中的代碼你就會發現，有兩個選擇器

　　ul#summer-drinksli{

　　font-weight:normal;

　　font-size:12px;

　　color:black;}

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

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

　　.favorite{

　　color:red;

　　}

　　.favorite{

　　color:green;

　　}

　　執行的結果字體的顏色會變綠

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

　　ul#summer-drinksli.favorite{

　　color:red;

　　font-weight:bold;

　　}

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

　　htmlbodydiv#pagewrapul#summer-drinksli.favorite{

　　color:red;

　　font-weight:bold;

　　}

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

　　.favorite{

　　color:red!important;

　　font-weight:bold!important;

　　}

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

　　我的一個經典例子是：

　　.last{

　　margin-right:0!important;

　　}

　　計算CSS選擇器優先級

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

讀到這里，這篇“css優先級如何計算”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。