css樣式優先級順序是什么

這篇文章主要講解了“css樣式優先級順序是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css樣式優先級順序是什么”吧！

　　更好地理解哪些css樣式優先使用可以更清晰更有組織的來寫css代碼，所以讓我們看看控制給定html元素的三個css規則：

　　css優先級計算

　　css繼承

　　css層疊

　　學習這些規則將使您的CSS開發更上一層樓。

　　優先級計算

　　想象一下，你的html包含一個應用了一類“生物”的段落。您還有以下兩個css規則：

　　p{font-size：12px}

　　p.bio{font-size：14px}

　　你希望段落中的文字大小是12px還是14px？在這種情況下你可以猜測它將是14px。css（p.bio）的第二行比你的class=“bio”段更具體。然而，有時優先級并不容易看到。

　　例如，考慮以下html和css

　　<divid=“sidebar”>

　　<pclass=“bio”>文字在這里</p>

　　</div>

　　divp.bio{font-size：14px}

　　#sidebarp{font-size：12px}

　　乍一看，第一行css可能看起來更具體，但實際上上面的第二行更符合段落的字體大小。這是為什么？

　　要回答這個問題，我們需要考慮優先級規則。

　　通過計算css的各種成分并以（a，b，c，d）形式表達它們來計算特異性。這將通過一個例子更清楚，但首先是組件。

　　元素，偽元素：d=1-（0,0,0,1）

　　類，偽類，屬性：c=1-（0,0,1,0）

　　Id：b=1-（0,1,0,0）

　　內聯樣式：a=1-（1,0,0,0）

　　id比類更具體而不是元素。

　　您可以通過計算上述每一項并將a，b，c或d加1來計算優先級。同樣重要的是要注意0,0,1,0比0,0,0,15更具體。讓我們看一些例子來使計算更清晰。

　　p：1個元素-（0,0,0,1）

　　div：1個元素-（0,0,0,1）

　　#sidebar：1個id-（0,1,0,0）

　　div＃sidebar：1個元素，1個id-（0,1,0,1）

　　div＃sidebarp：2個元素，1個id-（0,1,0,2）

　　div＃sidebarp.bio:2個元素，1個類，1個id-（0,1,1,2）

　　讓我們再看一下上面的例子

　　divp.bio{font-size：14px}-（0,0,1,2）

　　#sidebarp{font-size：12px}-（0,1,0,1）

　　第二個具有更高的優先級，因此優先。

　　在我們前進之前的最后一點。重要性勝過優先級，當你使用！important標記css屬性時，你會覆蓋優先級規則等等

　　divp.bio{font-size：14px！important}

　　#sidebarp{font-size：12px}

　　表示上面的第一行css優先于第二行而不是第二行。！important仍然是圍繞基本規則的特殊性，如果您了解規則的運作方式，您應該永遠不需要。

　　繼承

　　繼承背后的想法相對容易理解。元素從其父容器繼承樣式。如果將body標簽設置為使用color：red，那么除非另有說明，否則正文中所有元素的文本也將為紅色。

　　但是，并非所有css屬性都是繼承的。例如，邊距和填充是非繼承屬性。如果在div上設置邊距或填充，則div內的段落不會繼承您在div上設置的邊距和填充。該段落將使用默認的瀏覽器邊距和填充，直到您另外聲明。

　　但是，您可以顯式設置屬性以從其父容器繼承樣式。例如，您可以聲明

　　p{margin：inherit;填充：繼承}

　　然后你的段落將從它的包含元素繼承。

　　層疊

　　在最高級別，層疊是控制所有css優先級的，并且如下工作。

　　1、查找適用于相關元素和屬性的所有css聲明。

　　2、按原點和重量排序。Origin指的是聲明的來源（作者樣式，用戶樣式，瀏覽器默認值），權重指的是聲明的重要性。（作者的權重大于用戶的權重大于默認值。！important比正常聲明更重要）

　　3、計算優先級

　　4、如果上述所有規則中的兩個規則相同，那么最后一個規則獲勝。嵌入在html中的CSS總是在外部樣式表之后，而不管html中的順序如何。

　　上面的＃3很可能是你最需要注意的。使用＃2只需了解您的樣式將覆蓋用戶設置瀏覽器的方式，除非他們將規則設置為重要。

　　還要意識到您的樣式將覆蓋瀏覽器默認值，但這些默認值確實存在，并且通常會導致跨瀏覽器問題。使用重置文件，如EricMeyer的CSS重置或Yahoo的YUI重置CSS有助于將默認樣式排除在等式之外。

感謝各位的閱讀，以上就是“css樣式優先級順序是什么”的內容了，經過本文的學習后，相信大家對css樣式優先級順序是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！