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

<div id = “sidebar” >
<p class = “bio” >文字在這里</ p>
</ div>

div p.bio { font-size ：14px }
#sidebar p { 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＃sidebar p：2個元素，1個id - （0,1,0,2）

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

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

div p.bio { font-size ：14px }  - （0,0,1,2）
#sidebar p { font-size ：12px }  - （0,1,0,1）

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

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

div p.bio { font-size ：14px ！important }    
#sidebar p { 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只需了解您的樣式將覆蓋用戶設置瀏覽器的方式，除非他們將規則設置為重要。

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

總結

希望以上內容有助于理清您的一些CSS優先級問題。大多數情況下，如果你的風格存在沖突，問題將歸結為優先級。有時你還沒有聲明一些css，但是一個元素的行為方式你并不期望它可能從父容器或瀏覽器的默認樣式繼承了某些css。

聲明css時的一般經驗法則是聲明具有最小優先級的屬性來設置元素的樣式。例如，使用#sidebar而不是div＃sidebar。我承認打破這個一般規則遠遠超過我應該，但通過使用所需的最小優先級，它將使您更容易通過聲明更具體的樣式來覆蓋樣式。

如果您使用最具優先級，您可能會在以后遇到問題并發現自己必須添加不必要的HTML以便能夠添加更多優先級，或者您可能會發現自己不再使用！important或聲明內聯樣式。從最小的優先級開始，僅在需要時添加更多。

看完了這篇文章，相信你對CSS中的樣式優先級是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！