整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多樣式規(guī)則應(yīng)用在同一元素上的情況。此時(shí)CSS就會(huì)根據(jù)樣式規(guī)則的權(quán)重，優(yōu)先顯示權(quán)重最高的樣式。CSS優(yōu)先級(jí)指的就是CSS樣式規(guī)則的權(quán)重。在網(wǎng)頁(yè)制作中，CSS為每個(gè)基礎(chǔ)選擇器都指定了不同的權(quán)重，方便我們添加樣式代碼。為了深入理解CSS優(yōu)先級(jí)，我們通過(guò)一段示例代碼進(jìn)行分析。CSS樣式代碼如下：
p{ color:red;} /*標(biāo)簽樣式*/
.blue{ color:green;} /*class樣式*/
theader{ color:blue;} /*id樣式*/CSS樣式代碼對(duì)應(yīng)的HTML結(jié)構(gòu)為：
<p class="blue" id="header">
幫幫我，我到底顯示什么顏色?
</p>在上面的示例代碼中，使用不同的選擇器對(duì)同一個(gè)元素設(shè)置文本顏色，這時(shí)瀏覽器會(huì)根據(jù)CSS選擇器的優(yōu)先級(jí)規(guī)則解析CSS樣式。為了便于判斷元素的優(yōu)先級(jí)，CSS為每一種基礎(chǔ)選擇器都分配了一個(gè)權(quán)重，我們可以通過(guò)虛擬數(shù)值的方式為這些基礎(chǔ)選擇器匹配權(quán)重。假設(shè)標(biāo)簽選擇器具有權(quán)重為1.類選擇器具有權(quán)重則為10，id選擇器具有權(quán)重則為l00。這樣id選擇器“#header”就具有最大的優(yōu)先級(jí)，因此文本顯示為藍(lán)色。
對(duì)于由多個(gè)基礎(chǔ)選擇器構(gòu)成的復(fù)合選擇器(并集選擇器除外)，其權(quán)重可以理解為這些基礎(chǔ)選擇器權(quán)重的疊加。例如，下面的CSS代碼。
p strong{color:black} /*權(quán)重為：1+1*/
strong.blue{color:green;} /*權(quán)重為：1+10*/
.father strong{color:yellow} /*權(quán)重為：10+1*/
p.father strong{color:orange;} /*權(quán)重為：1+10+1*/
p.father .blue{color:gold;} /*權(quán)重為：1+10+10*/
theader strong{color:pink;} /*權(quán)重為：100+1*/
#header strong.blue{color:red;} /*權(quán)重為：100+1+10*/對(duì)應(yīng)的HTML結(jié)構(gòu)為：
<p class="father" id="header">
<strong class="blue">文本的顏色</strong>
</p>這時(shí)，CsS代碼中的“#header strong.blue”選擇器的權(quán)重最高，文本顏色將顯示為紅色。此外，在考慮權(quán)重時(shí)，我們還需要注意一些特殊的情況。
(1)繼承樣式的權(quán)重為0
在嵌套結(jié)構(gòu)中、h不管父元素樣式的權(quán)重多大，被子元素繼承時(shí)，它的權(quán)重都為0，也就是說(shuō)子元素定義的樣式會(huì)覆蓋繼承來(lái)的樣式。例如，下面的CSS樣式代碼。
strong{color:red;}
#header{color:green;}CSS樣式代碼對(duì)應(yīng)的HTML結(jié)構(gòu)如下：
<p id="header" class="blue">
<strong>繼承樣式不如自己定義的權(quán)重大</strong>
</p>在上面的代碼中，雖然“#header”具有權(quán)重100，但被標(biāo)簽繼承時(shí)權(quán)重為0。而“strong”選擇器的權(quán)重雖然僅為1，但它大于繼承樣式的權(quán)重，所以頁(yè)面中的文本顯示為紅色。
(2)行內(nèi)樣式優(yōu)先
應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高。換算為數(shù)值，我們可以理解為遠(yuǎn)大于100。因此行內(nèi)樣式擁有比上面提到的選擇器都高的優(yōu)先級(jí)。
(3)權(quán)重相同時(shí)，CSS的優(yōu)先級(jí)遵循就近原則
也就是說(shuō)，靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說(shuō)按照代碼排列上下順序，排在最下邊的樣式優(yōu)先級(jí)最大。例如，下面為外部定義的CSS示例代碼。
/*CSS文檔,文件名為style_red.css*/
#header{color:red;} /*外部樣式*/對(duì)應(yīng)的HTML結(jié)構(gòu)代碼如下：
<title>CSS優(yōu)先級(jí)</title>
<link rel="stylesheet"href="style_red.css"type="text/css"/> /*引入外部
定義的CSS代碼*/
<style type="text/css">
#header{color:gray;}
</style>
</head>
<body>
/*內(nèi)嵌式樣式*/
<p id="header">權(quán)重相同時(shí)，就近優(yōu)先</p>
</body>在上面的示例代碼中，第2行代碼通過(guò)外鏈?zhǔn)揭隒SS樣式，該樣式設(shè)置文本樣式顯示為紅色。第3~5行代碼通過(guò)內(nèi)嵌式引入CSS樣式，該樣式設(shè)置文本樣式顯示為灰色。
上面的頁(yè)面被解析后，段落文本將顯示為灰色，即內(nèi)嵌式樣式優(yōu)先。這是因?yàn)閮?nèi)嵌樣式比外鏈?zhǔn)綐邮礁拷麳TML.元素。同樣的道理，如果同時(shí)引用兩個(gè)外部樣式表，則排在下面的樣式表具有較大的優(yōu)先級(jí)。如果此時(shí)將內(nèi)嵌樣式更改為：
p{color:gray;} /*內(nèi)嵌式樣式*/此時(shí)外鏈?zhǔn)降膇d選擇器和嵌入式的標(biāo)簽選擇器權(quán)重不同，“#header”的權(quán)重更高，文字將顯示為外部樣式定義的紅色。
(4)CSS定義“l(fā)important”命令，會(huì)被賦予最大的優(yōu)先級(jí)
當(dāng)CSS定義了“l(fā)important”命令后，將不再考慮權(quán)重和位置關(guān)系，使用“l(fā)important”的標(biāo)簽都具有最大優(yōu)先級(jí)。例如，下面的示例代碼。
#header{color:red!important;}應(yīng)用此樣式的段落文本顯示為紅色，因?yàn)椤發(fā)important”命令的樣式擁有最大的優(yōu)先級(jí)。需要注意的是，“l(fā)important”命令必須位于屬性值和分號(hào)之間，否則無(wú)效。
復(fù)合選擇器的權(quán)重為組成它的基礎(chǔ)選擇器權(quán)重的疊加，但是這種疊加并不是簡(jiǎn)單的數(shù)字之和。下面通過(guò)一個(gè)案例來(lái)具體說(shuō)明，如例1所示。
例1 examplel1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>復(fù)合選擇器權(quán)重的疊加</title>
<style type="text/css">
.inner{text-decoration:line-through;}/*類選擇器定義刪除線，權(quán)重為10*/
div div div div div div div div div div div{text-decoration:underline;}
/*后代選擇器定義下畫(huà)線，權(quán)重為11個(gè)1的疊加*/
</style>
</head>
<body>
<div>
<div><div><div><div><div><div><div><div><div>
<div class="inner">文本的樣式</div>
</div></div></div></div></div></div></div></div></div>
</div>
</body>
</html>例1共使用了11對(duì)<div>標(biāo)簽，它們層層嵌套。第15行代碼我們對(duì)最里層的<div>定義類名“inner”。第7、8行代碼，使用類選擇器和后代選擇器分別定義最里層div的樣式。此時(shí)瀏覽器中文本的樣式到底如何顯示呢?如果僅僅將基礎(chǔ)選擇器的權(quán)重相加，后代選擇器(包含11層div)的權(quán)重為11，大于類選擇器“.inner”的權(quán)重10，文本將添加下畫(huà)線。
運(yùn)行例1，效果如下所示。
在上圖中，文本并沒(méi)有像預(yù)期的那樣添加下畫(huà)線，而顯示了類選擇器“.inner”定義的刪除線?？梢?jiàn)，無(wú)論在外層添加多少個(gè)標(biāo)簽，復(fù)合選擇器的權(quán)重?zé)o論為多少個(gè)<div>標(biāo)簽選擇器的疊加，其權(quán)重都不會(huì)高于類選擇器。同理，復(fù)合選擇器的權(quán)重?zé)o論為多少個(gè)類選擇器和標(biāo)簽選擇器的疊加，其權(quán)重都不會(huì)高于i選擇器。
謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序。既然樣式有優(yōu)先級(jí)，那么就會(huì)有一個(gè)規(guī)則來(lái)約定這個(gè)優(yōu)先級(jí)，而這個(gè)“規(guī)則”就是重點(diǎn)。
【引言】
講解完這篇CSS優(yōu)先級(jí)的文章后，我們就把CSS相關(guān)的知識(shí)全部講解完了，大家可以通過(guò)關(guān)注我的頭條賬號(hào)在我的主頁(yè)文章分類去查看，我們一共分為七節(jié)課，先后講解了CSS基礎(chǔ)語(yǔ)法、CSS樣式、CSS框模型、CSS定位、CSS選擇器、CSS高級(jí)語(yǔ)法、CSS優(yōu)先級(jí)，等所有的CSS知識(shí)點(diǎn)。接下來(lái)的我將會(huì)學(xué)習(xí)相關(guān)CSS3的新知識(shí)，希望不要停止學(xué)習(xí)哦！跟著我一起動(dòng)起來(lái)！
CSS優(yōu)先級(jí)
一般來(lái)說(shuō)，CSS的優(yōu)先級(jí)分為引入方式的優(yōu)先級(jí)和樣式的優(yōu)先級(jí)。
樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？
之前我們也說(shuō)過(guò)CSS樣式表的三種引入方式：
1、行內(nèi)樣式
最直接簡(jiǎn)單的一種方式，對(duì)HTml標(biāo)簽直接使用style=“”。
2、內(nèi)嵌樣式
內(nèi)嵌樣式就是將CSS代碼寫(xiě)在<head></head>之間，并且用<style></style>進(jìn)行聲明。
3、鏈接樣式
鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在<head></head>之間加上<link…/>就可以了。
4、導(dǎo)入樣式
導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，在HTML初始化時(shí)，會(huì)被導(dǎo)入到HTML或者CSS文件中， 成為文件的一部分，類似第二種內(nèi)嵌樣式。
那么四種CSS引入方式的優(yōu)先級(jí)到底是怎樣的呢？
1、就近原則
2、理論上：行內(nèi)>內(nèi)嵌>鏈接>導(dǎo)入
3、實(shí)際上：內(nèi)嵌、鏈接、導(dǎo)入在同一個(gè)文件頭部，誰(shuí)離相應(yīng)的代碼近，誰(shuí)的優(yōu)先級(jí)高（頁(yè)面多種方式使用css樣式引入）
另外呢，在昨天的CSS高級(jí)語(yǔ)法中，有小伙伴留言問(wèn)？
CSS樣式不是最好放一個(gè)表中嗎？頭部、?部、側(cè)邊丶字體分開(kāi)，那要加載多個(gè)會(huì)影響效率吧？
在這我想說(shuō)：
分開(kāi)寫(xiě)，幾乎沒(méi)影響的，無(wú)非就是分開(kāi)多條會(huì)使文件大一些而已，而css文件只要沒(méi)變化，幾乎只需要下載一次，然后就會(huì)一直呆在瀏覽器的緩存里的。而且通常服務(wù)器在發(fā)送網(wǎng)頁(yè)時(shí)都會(huì)先用gzip壓縮，瀏覽器收到后會(huì)自動(dòng)解壓，這種情況下不管哪種寫(xiě)法的css文件壓縮后的大小幾乎都是一樣的，因?yàn)槟切┒嘤嗟目崭窈突剀?chē)幾乎可以被壓縮到忽略不計(jì)。另外，分開(kāi)多行寫(xiě)會(huì)使代碼可讀性更好，這個(gè)好處會(huì)遠(yuǎn)遠(yuǎn)高于由于文件大對(duì)頁(yè)面加載造成的一點(diǎn)點(diǎn)影響。
當(dāng)創(chuàng)建的樣式表越來(lái)越復(fù)雜時(shí)，一個(gè)標(biāo)簽的樣式將會(huì)受到越來(lái)越多的影響，這種影響可能來(lái)自周?chē)臉?biāo)簽，也可能來(lái)自其自身。下面我們從這兩方面去看看 CSS 樣式的優(yōu)先級(jí)。
1、CSS的繼承性
這個(gè)繼承性就是從父級(jí)元素的CSS屬性被傳到其子標(biāo)簽上，坦白說(shuō)父級(jí)<div>有個(gè)color：red的屬性，其里面子標(biāo)簽<p>也會(huì)繼承這個(gè)color：red。
由此可見(jiàn)，當(dāng)網(wǎng)頁(yè)比較復(fù)雜， HTML 結(jié)構(gòu)嵌套較深時(shí)，一個(gè)標(biāo)簽的樣式將深受其祖先標(biāo)簽樣式的影響。影響的規(guī)則是：
CSS 優(yōu)先規(guī)則1： 最近的祖先樣式比其他祖先樣式優(yōu)先級(jí)高。例如：
如果我們把一個(gè)標(biāo)簽從祖先那里繼承來(lái)的而自身沒(méi)有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個(gè)標(biāo)簽直接擁有的屬性。又有如下規(guī)則：
CSS 優(yōu)先規(guī)則2："直接樣式"比"祖先樣式"優(yōu)先級(jí)高。例如：
2、選擇器的優(yōu)先級(jí)
在討論 CSS 優(yōu)先級(jí)之前，先說(shuō)說(shuō) CSS 7 種基礎(chǔ)的選擇器：
CSS 優(yōu)先規(guī)則3：優(yōu)先級(jí)關(guān)系：內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器
提示：css會(huì)先查看規(guī)則的權(quán)重（!important），加了權(quán)重的優(yōu)先級(jí)最高，當(dāng)權(quán)重相同的時(shí)候，會(huì)比較選擇器的特殊性值（Specificity），當(dāng)Specificity也一樣的時(shí)候，css規(guī)則會(huì)按順序排序，后聲明的規(guī)則優(yōu)先級(jí)高。
咱們來(lái)看看下面這點(diǎn)HTML文檔，然后分析一下：
最終的 color 為 black，因?yàn)閮?nèi)聯(lián)樣式比其他選擇器的優(yōu)先級(jí)高。
所有 CSS 的選擇符由上述 7 種基礎(chǔ)的選擇器或者組合而成，組合的方式有 3 種：
當(dāng)一個(gè)標(biāo)簽同時(shí)被多個(gè)選擇符選中，我們便需要確定這些選擇符的優(yōu)先級(jí)。我們有如下規(guī)則：
CSS 優(yōu)先規(guī)則4：計(jì)算選擇符中 ID 選擇器的個(gè)數(shù)（a），計(jì)算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個(gè)數(shù)之和（b），計(jì)算選擇符中標(biāo)簽選擇器和偽元素選擇器的個(gè)數(shù)之和（c）。按 a、b、c 的順序依次比較大小，大的則優(yōu)先級(jí)高，相等則比較下一個(gè)。若最后兩個(gè)的選擇符中 a、b、c 都相等，則按照"就近原則"來(lái)判斷。例如：
由規(guī)則 4 可見(jiàn)，<span> 的 color 為 red。
如果外部樣式表和內(nèi)部樣式表中的樣式發(fā)生沖突會(huì)出現(xiàn)什么情況呢？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應(yīng)用的位置越在下面則優(yōu)先級(jí)越高，其實(shí)這仍然可以用規(guī)則 4 來(lái)解釋。例如：
從順序上看，內(nèi)部樣式在最下面，被最晚引用，所以 <div> 的背景色為 blue。
上面代碼中，@import 語(yǔ)句必須出現(xiàn)在內(nèi)部樣式之前，否則文件引入無(wú)效。當(dāng)然不推薦使用 @import 的方式引用外部樣式文件，原因是如果瀏覽器版本較低，無(wú)法正確導(dǎo)入外部樣式文件，另外就是當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載；
CSS 還提供了一種可以完全忽略以上規(guī)則的方法，當(dāng)你一定、必須確保某一個(gè)特定的屬性要顯示時(shí)，可以使用這個(gè)技術(shù)。
CSS 優(yōu)先規(guī)則5：屬性后插有 !important 的屬性擁有最高優(yōu)先級(jí)。若同時(shí)插有 !important，則再利用規(guī)則 3、4 判斷優(yōu)先級(jí)。
雖然 .father .son 擁有更高的權(quán)值，但選擇器 p 中的 background 屬性被插入了 !important， 所以 <p> 的 background 為 red。
你在百度的時(shí)候有的人會(huì)這樣說(shuō)：
即 ID 選擇器權(quán)值為 100，類選擇器權(quán)值為 10，標(biāo)簽選擇器權(quán)值為 1，當(dāng)一個(gè)選擇器由多個(gè) ID 選擇器、類選擇器或標(biāo)簽選擇器組成時(shí)，則將所有權(quán)值相加，然后再比較權(quán)值。這種說(shuō)法其實(shí)是有問(wèn)題的。比如一個(gè)由 11 個(gè)類選擇器組成的選擇器和一個(gè)由 1 個(gè) ID 選擇器組成的選擇器指向同一個(gè)標(biāo)簽，按理說(shuō) 110 > 100，應(yīng)該應(yīng)用前者的樣式，然而事實(shí)是應(yīng)用后者的樣式。錯(cuò)誤的原因是：選擇器的權(quán)值不能進(jìn)位。還是拿剛剛的例子說(shuō)明。11 個(gè)類選擇器組成的選擇器的總權(quán)值為 110，但因?yàn)?11 個(gè)均為類選擇器，所以其實(shí)總權(quán)值最多不能超過(guò) 100， 你可以理解為 99.99，所以最終應(yīng)用后者樣式。
關(guān)于CSS優(yōu)先級(jí)就說(shuō)這么多了，基本上涵蓋了所有的CSS優(yōu)先級(jí)的知識(shí)，大家可以認(rèn)真學(xué)習(xí)一下，到這，CSS的所有知識(shí)就講解完了。
下一篇我們來(lái)學(xué)習(xí)CSS3相關(guān)的知識(shí)內(nèi)容。
PS：
本文為‘Web前端進(jìn)階指南’原創(chuàng)，手動(dòng)碼字不易，小伙伴們別忘了順手點(diǎn)個(gè)贊加個(gè)關(guān)注哈，有什么不懂的下方留言評(píng)論或私信。謝謝大家哈！
邊文章我們說(shuō)了使用css的三種不同的選擇器，本篇文章我們主要介紹css的繼承規(guī)則以及css代碼的權(quán)重優(yōu)先級(jí)問(wèn)題。
CSS的某些樣式代碼是具有繼承性的，那么究竟什么是繼承呢？繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素，而且應(yīng)用于其后代。比如下面代碼：我們?cè)O(shè)置p標(biāo)簽的字體顏色為紅色并添加1像素的紅色邊框。
在網(wǎng)頁(yè)中的顯示效果就如下圖所示：
從上邊的圖片你可以看出字體顏色為紅色不僅使p標(biāo)簽中的文字變成了紅色，還應(yīng)用于p標(biāo)簽中的所有子元素文本，這里子元素為span標(biāo)簽。但是邊框?qū)傩圆](méi)有應(yīng)用到子元素中去。
經(jīng)過(guò)我們總結(jié)測(cè)試，可以得出以下結(jié)論：
css就像工程師一樣是很?chē)?yán)謹(jǐn)?shù)?，有的時(shí)候我們?yōu)橥粋€(gè)元素設(shè)置了不同的CSS樣式代碼，那么元素會(huì)啟用哪一個(gè)CSS樣式呢?我們來(lái)看一下面的代碼：
上邊的代碼中，p和.first都匹配到了p這個(gè)標(biāo)簽上，那么會(huì)顯示哪種顏色呢？#0f0是正確的顏色，那么為什么呢？是因?yàn)闉g覽器是根據(jù)權(quán)值來(lái)判斷使用哪種css樣式的，權(quán)值高的就使用哪種css樣式。
下面是權(quán)值的規(guī)則：
標(biāo)簽（div、p、span等）的權(quán)值為1，類選擇符（.xxx）的權(quán)值為10，ID選擇符（#xxx）的權(quán)值為100，內(nèi)聯(lián)樣式（style="color:#f00;"）的權(quán)值為1000。
我們來(lái)做一個(gè)權(quán)重的拔高練習(xí)，觀察以下代碼看一下p標(biāo)簽以及span標(biāo)簽內(nèi)的文字顯示顏色應(yīng)該是什么？
由上邊我們可以看出來(lái)，p標(biāo)簽的樣式中#second的權(quán)值最高為100，那么p的文字顏色為yellow，而span標(biāo)簽樣式中內(nèi)聯(lián)樣式權(quán)值最高為1000，那么span的文字顏色就為#000。我們的結(jié)果就會(huì)如下圖所示：
對(duì)于css的繼承以及代碼優(yōu)先級(jí)的問(wèn)題我們今天就先介紹到這里，大家在平時(shí)可以自己多加練習(xí)練習(xí)，自己多寫(xiě)幾個(gè)權(quán)重的例子嘗試嘗試。
每日金句：人若有志，就不會(huì)在半坡停止。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
