CSS中的樣式優(yōu)先級(jí)是什么

小編給大家分享一下CSS中的樣式優(yōu)先級(jí)是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

控制html元素的三個(gè)css規(guī)則：

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

css繼承

css層疊

學(xué)習(xí)這些規(guī)則將使您的CSS開發(fā)更上一層樓。

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

想象一下，你的html包含一個(gè)應(yīng)用了一類“生物”的段落。您還有以下兩個(gè)css規(guī)則：

p { font-size ：12px }
p.bio { font-size ：14px }

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

例如，考慮以下html和css

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

div p.bio { font-size ：14px }
#sidebar p { font-size ：12px }

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

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

通過計(jì)算css的各種成分并以（a，b，c，d）形式表達(dá)它們來計(jì)算特異性。這將通過一個(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比類更具體而不是元素。

您可以通過計(jì)算上述每一項(xiàng)并將a，b，c或d加1來計(jì)算優(yōu)先級(jí)。同樣重要的是要注意0,0,1,0比0,0,0,15更具體。讓我們看一些例子來使計(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＃sidebar p：2個(gè)元素，1個(gè)id - （0,1,0,2）

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

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

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

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

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

div p.bio { font-size ：14px ！important }    
#sidebar p { font-size ：12px }

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

繼承

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

但是，并非所有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指的是聲明的來源（作者樣式，用戶樣式，瀏覽器默認(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)致跨瀏覽器問題。使用重置文件，如Eric Meyer的CSS重置或Yahoo的YUI重置CSS有助于將默認(rèn)樣式排除在等式之外。

總結(jié)

希望以上內(nèi)容有助于理清您的一些CSS優(yōu)先級(jí)問題。大多數(shù)情況下，如果你的風(fēng)格存在沖突，問題將歸結(jié)為優(yōu)先級(jí)。有時(shí)你還沒有聲明一些css，但是一個(gè)元素的行為方式你并不期望它可能從父容器或?yàn)g覽器的默認(rèn)樣式繼承了某些css。

聲明css時(shí)的一般經(jīng)驗(yàn)法則是聲明具有最小優(yōu)先級(jí)的屬性來設(shè)置元素的樣式。例如，使用#sidebar而不是div＃sidebar。我承認(rèn)打破這個(gè)一般規(guī)則遠(yuǎn)遠(yuǎn)超過我應(yīng)該，但通過使用所需的最小優(yōu)先級(jí)，它將使您更容易通過聲明更具體的樣式來覆蓋樣式。

如果您使用最具優(yōu)先級(jí)，您可能會(huì)在以后遇到問題并發(fā)現(xiàn)自己必須添加不必要的HTML以便能夠添加更多優(yōu)先級(jí)，或者您可能會(huì)發(fā)現(xiàn)自己不再使用！important或聲明內(nèi)聯(lián)樣式。從最小的優(yōu)先級(jí)開始，僅在需要時(shí)添加更多。

看完了這篇文章，相信你對(duì)CSS中的樣式優(yōu)先級(jí)是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！