css的優(yōu)先級順序是怎樣的

當(dāng)創(chuàng)建的樣式表越來越復(fù)雜時，一個標(biāo)簽的樣式將會受到越來越多的影響，這種影響可能來自周圍的標(biāo)簽，也可能來自其自身。下面我們從這兩方面去看看 CSS 樣式的優(yōu)先級。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括巴中網(wǎng)站建設(shè)、巴中網(wǎng)站制作、巴中網(wǎng)頁制作以及巴中網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，巴中網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到巴中省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

CSS 的繼承性

CSS 的繼承特性指的是應(yīng)用在一個標(biāo)簽上的那些 CSS 屬性被傳到其子標(biāo)簽上?？聪旅娴?HTML 結(jié)構(gòu)：

div

p/p/div

如果?div?有個屬性?color: red，則這個屬性將被?p?繼承，即?p?也擁有屬性?color: red。

由上可見，當(dāng)網(wǎng)頁比較復(fù)雜， HTML 結(jié)構(gòu)嵌套較深時，一個標(biāo)簽的樣式將深受其祖先標(biāo)簽樣式的影響。影響的規(guī)則是：

CSS 優(yōu)先規(guī)則1：?最近的祖先樣式比其他祖先樣式優(yōu)先級高。

例1：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

div style="color: blue"

div class="son"/div

/div/div

如果我們把一個標(biāo)簽從祖先那里繼承來的而自身沒有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個標(biāo)簽直接擁有的屬性。又有如下規(guī)則：

CSS 優(yōu)先規(guī)則2："直接樣式"比"祖先樣式"優(yōu)先級高。

例2：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

div class="son" style="color: blue"/div/div

選擇器的優(yōu)先級

上面討論了一個標(biāo)簽從祖先繼承來的屬性，現(xiàn)在討論標(biāo)簽自有的屬性。在討論 CSS 優(yōu)先級之前，先說說 CSS 7 種基礎(chǔ)的選擇器：

ID 選擇器， 如 #id{}

類選擇器， 如 .class{}

屬性選擇器， 如 a[href="segmentfault.com"]{}

偽類選擇器， 如 :hover{}

偽元素選擇器， 如 ::before{}

標(biāo)簽選擇器， 如 span{}

通配選擇器， 如 *{}

CSS 優(yōu)先規(guī)則3：優(yōu)先級關(guān)系：內(nèi)聯(lián)樣式 ID 選擇器 類選擇器 = 屬性選擇器 = 偽類選擇器 標(biāo)簽選擇器 = 偽元素選擇器

例3：

// HTMLdiv class="content-class" id="content-id" style="color: black"/div// CSS#content-id {

color: red;}.content-class {

color: blue;}div {

color: grey;}

最終的 color 為 black，因?yàn)閮?nèi)聯(lián)樣式比其他選擇器的優(yōu)先級高。

所有 CSS 的選擇符由上述 7 種基礎(chǔ)的選擇器或者組合而成，組合的方式有 3 種：

后代選擇符： .father .child{}

子選擇符： .father .child{}

相鄰選擇符: .bro1 + .bro2{}

當(dāng)一個標(biāo)簽同時被多個選擇符選中，我們便需要確定這些選擇符的優(yōu)先級。我們有如下規(guī)則：

CSS 優(yōu)先規(guī)則4：計(jì)算選擇符中 ID 選擇器的個數(shù)（a），計(jì)算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數(shù)之和（b），計(jì)算選擇符中標(biāo)簽選擇器和偽元素選擇器的個數(shù)之和（c）。按 a、b、c 的順序依次比較大小，大的則優(yōu)先級高，相等則比較下一個。若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。

例4：

// HTMLdiv id="con-id"

span class="con-span"/span/div// CSS#con-id span {

color: red;}div .con-span {

color: blue;}

由規(guī)則 4 可見，span 的 color 為 red。

如果外部樣式表和內(nèi)部樣式表中的樣式發(fā)生沖突會出現(xiàn)什么情況呢？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應(yīng)用的位置越在下面則優(yōu)先級越高，其實(shí)這仍然可以用規(guī)則 4 來解釋。

例5：

// HTMLlink rel="stylesheet" type="text/css" href="style-link.css"style type="text/css"@import url(style-import.css); div {

background: blue;}/stylediv/div// style-link.cssdiv {

background: lime;}// style-import.cssdiv {

background: grey;}

從順序上看，內(nèi)部樣式在最下面，被最晚引用，所以 div 的背景色為 blue。

上面代碼中，@import?語句必須出現(xiàn)在內(nèi)部樣式之前，否則文件引入無效。當(dāng)然不推薦使用?@import?的方式引用外部樣式文件，原因見另一篇博客：CSS 引入方式。

CSS 還提供了一種可以完全忽略以上規(guī)則的方法，當(dāng)你一定、必須確保某一個特定的屬性要顯示時，可以使用這個技術(shù)。

CSS 優(yōu)先規(guī)則5：屬性后插有?!important?的屬性擁有最高優(yōu)先級。若同時插有?!important，則再利用規(guī)則 3、4 判斷優(yōu)先級。

例6：

// HTMLdiv class="father"

p class="son"/p/div// CSSp {

background: red !important;}.father .son {

background: blue;}

雖然 .father .son 擁有更高的權(quán)值，但選擇器 p 中的 background 屬性被插入了 !important， 所以 p 的 background 為 red。

錯誤的說法

在學(xué)習(xí)過程中，你可能發(fā)現(xiàn)給選擇器加權(quán)值的說法，即 ID 選擇器權(quán)值為 100，類選擇器權(quán)值為 10，標(biāo)簽選擇器權(quán)值為 1，當(dāng)一個選擇器由多個 ID 選擇器、類選擇器或標(biāo)簽選擇器組成時，則將所有權(quán)值相加，然后再比較權(quán)值。這種說法其實(shí)是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標(biāo)簽，按理說 110 100，應(yīng)該應(yīng)用前者的樣式，然而事實(shí)是應(yīng)用后者的樣式。錯誤的原因是：權(quán)重的進(jìn)制是并不是十進(jìn)制，CSS 權(quán)重進(jìn)制在 IE6 為 256，后來擴(kuò)大到了 65536，現(xiàn)代瀏覽器則采用更大的數(shù)量。。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權(quán)值為 110，但因?yàn)?11 個均為類選擇器，所以其實(shí)總權(quán)值最多不能超過 100， 你可以理解為 99.99，所以最終應(yīng)用后者樣式。

CSS選擇器的優(yōu)先級？

通常我們可以將CSS的優(yōu)先級由高到低分為六組：

1、無條件優(yōu)先的屬性只需要在屬性后面使用 !important 。它會覆蓋頁面內(nèi)任何位置定義的元素樣式。當(dāng)然，IE 6不支持這個屬性，于是它也成為一種hack被很多人所熟知，真正使命被人淡忘。

2、第二高位的優(yōu)先屬性是在html中給元素標(biāo)簽加style。由于該方法會造成CSS的難以管理，所以不推薦使用。

3、第三級優(yōu)先的屬性是由一個或多個id選擇器來定義的。例如 #id{margin:0;} 會覆蓋 .classname{margin:3px;}。

4、第四級的屬性由一個或多個 類選擇器、屬性選擇器、偽類選擇器定義。如 .classname{margin:3px;} 會覆蓋 div{margin:6px;}

5、第五級由一個或多個 類型選擇器定義。如 div{margin:6px;} 覆蓋 *{margin:10px;} 。

最低一級的選擇器是為一個通配選擇器，用*{margin:10px;}這樣的類型來定義。

另外，可以用一句極為簡單的話來描述CSS優(yōu)先級問題：當(dāng)一個CSS選擇器擁有更多的高級別屬性時，它的優(yōu)先級就會比較高。如 #i100

*.c20 *.c10{} 的優(yōu)先級就會高于 #i100 *.c10 div p span em{}

，這是由于前者擁有一個第三級和兩個第四級的選擇器而后者第三級和第四級的選擇器各為一個，當(dāng)然前者優(yōu)先級會比較高。

如果想學(xué)習(xí)和交流更多html 前端開發(fā)的技術(shù) 你可以來我們這個群：先寫下這三個數(shù)字：432，然后在寫下中間這三個數(shù)字：664，最后寫下的三個數(shù)字是：883，按照這個順序連起來，群就會出現(xiàn)。還有更多的技術(shù)資料，學(xué)習(xí)課程。

CSS選擇器是一個非常靈活的CSS屬性，優(yōu)雅的使用它會使你的頁面代碼不再臃腫，而且還可以作為hack的妙用方法之一。

當(dāng)比較多個相同級別的CSS選擇器優(yōu)先級時，它們定義的位置將決定一切。下面從位置上將CSS優(yōu)先級由高到低分為六級：

1、位于head/標(biāo)簽里的style/中所定義的CSS擁有最高級的優(yōu)先權(quán)。

2、第二級的優(yōu)先屬性由位于 style/標(biāo)簽中的 @import 引入樣式表所定義。

3、第三級的優(yōu)先屬性由link/標(biāo)簽所引入的樣式表定義。

4、第四級的優(yōu)先屬性由link/標(biāo)簽所引入的樣式表內(nèi)的 @import 導(dǎo)入樣式表定義。

5、第五級優(yōu)先的樣式有用戶設(shè)定。

最低級的優(yōu)先權(quán)由瀏覽器默認(rèn)。

理解了這些CSS優(yōu)先級問題后，也就不必苦惱于樣式定于中的此類問題了。

css優(yōu)先級

所謂CSS優(yōu)先級，即是指CSS樣式在瀏覽器中被解析的先后順序。既然樣式有優(yōu)先級，那么就會有一個規(guī)則來約定這個優(yōu)先級，而這個“規(guī)則”就是重點(diǎn)。

樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內(nèi)部引用多個外部樣式表。當(dāng)同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？

一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。

?瀏覽器缺省設(shè)置

?外部樣式表

?內(nèi)部樣式表（位于 head 標(biāo)簽內(nèi)部）

?內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：head 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。這只是一個大方面的優(yōu)先級，在前面文章中我們講過CSS有很多選擇器，那么對于同種樣式的CSS，各個選擇器的優(yōu)先級又是如何呢？

我們將某一個CSS看成一個三位數(shù)，通過比較數(shù)字的大小來獲取優(yōu)先級的高低，那么就會相當(dāng)簡單。在這里可以通過下面的規(guī)則來定義各個選擇器對應(yīng)的數(shù)字。

?百位數(shù)是該選擇器上的id的數(shù)量的總和；

?十位數(shù)是用在該選擇器上的其它屬性選擇器和偽類的總和。這里包括class (.example) 和屬性選擇器(比如 li[id=red])；

?個位數(shù)是計(jì)算元素(就像table、p、div、*等等)和偽元素(就像:first-line等)；

?如果兩個選擇器對應(yīng)的數(shù)字相等，也就是具有同樣的優(yōu)先級，在樣式表中后面的那個起作用。

?標(biāo)有"!important"的規(guī)則具有最高優(yōu)先級，例如H1{color:black !importan; font-family:sans-serif}，前景色被標(biāo)為important，這個前景色具有很高的優(yōu)先級。但是這種聲明容易引起混亂，因此通常使用得較少。

選擇器 數(shù)值

h1 {color:blue;} 1

p em {color:purple;} 1 + 1 = 2

.apple {color:red;} 10

p.bright {color:yellow;} 1 + 10 = 11

p.bright em.dark {color:brown;} 1 + 10 + 1 + 10 = 22

#id316 {color:yellow} 100

一般我們還可以通過瀏覽器的插件來查看，到底哪個CSS起作用，比如Firebug(Firefox)、Developer Tools(IE8)等。上面我們介紹到當(dāng)優(yōu)先級相同時，哪個CSS起作用取決于所處的位置，通常后面的CSS優(yōu)先級要高。但是對于IE瀏覽器，具有相同數(shù)值的動態(tài)CSS取決于添加的順序前后，而不是添加的位置前后；后添加的優(yōu)先級要高。

網(wǎng)頁標(biāo)題：css樣式優(yōu)先級最低代碼,css中優(yōu)先級
文章位置：http://jinyejixie.com/article10/dsdisgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、、全網(wǎng)營銷推廣、服務(wù)器托管、關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)