css樣式優(yōu)先級(jí)順序是什么

divp.bio{font-size：14px}

#sidebarp{font-size：12px}

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

要回答這個(gè)問(wèn)題，我們需要考慮優(yōu)先級(jí)規(guī)則。

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

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

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

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

內(nèi)聯(lián)樣式：a=1-（1,0,0,0）

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

您可以通過(guò)計(jì)算上述每一項(xiàng)并將a，b，c或d加1來(lái)計(jì)算優(yōu)先級(jí)。同樣重要的是要注意0,0,1,0比0,0,0,15更具體。讓我們看一些例子來(lái)使計(jì)算更清晰。

p：1個(gè)元素-（0,0,0,1）

div：1個(gè)元素-（0,0,0,1）

#sidebar：1個(gè)id-（0,1,0,0）

div＃sidebar：1個(gè)元素，1個(gè)id-（0,1,0,1）

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

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

讓我們?cè)倏匆幌律厦娴睦?/p>

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

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

第二個(gè)具有更高的優(yōu)先級(jí)，因此優(yōu)先。

在我們前進(jìn)之前的最后一點(diǎn)。重要性勝過(guò)優(yōu)先級(jí)，當(dāng)你使用！important標(biāo)記css屬性時(shí)，你會(huì)覆蓋優(yōu)先級(jí)規(guī)則等等

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

#sidebarp{font-size：12px}

表示上面的第一行css優(yōu)先于第二行而不是第二行。！important仍然是圍繞基本規(guī)則的特殊性，如果您了解規(guī)則的運(yùn)作方式，您應(yīng)該永遠(yuǎn)不需要。

繼承

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

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

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

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

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

層疊

在最高級(jí)別，層疊是控制所有css優(yōu)先級(jí)的，并且如下工作。

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

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

3、計(jì)算優(yōu)先級(jí)

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

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

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

感謝各位的閱讀，以上就是“css樣式優(yōu)先級(jí)順序是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css樣式優(yōu)先級(jí)順序是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！